Why is MX Google Map not resizing in tab?

Question

I am using MX Google Map to display a basic map. This map happens to be in a tab (Bootstrap). Here is the code for the basic tab.

<div class="masthead-image tab-content">    
    <div class="tab-pane fade" id="Map">{exp:stash:get name="location"}</div>
    <div class="tab-pane fade in active" id="Photo">{exp:stash:get name="masthead"}</div>
</div>

<ul class="unstyled">
    <li class="mapToggle"><a href="#Map" data-toggle="tab">View Map</a></li>
    <li class="mapToggle active"><a href="#Photo" data-toggle="tab">View Photo</a></li>
</ul>

The tabs are working fine, except that when I activate the map tab we get only a portion of a drawn map. To correct this issue I am attempting to trigger a resize event when the tab is activated... to no avail. Here is said code.

$('a[data-toggle="tab"]').on('shown', function (e) { 
    google.maps.event.trigger(map, 'resize');
    map.setZoom( map.getZoom() ); 
 });  // refire the map 

My question is why the event 'resize' is not happening as expected? I have a hunch that since MX Google Maps inserts the javascript for the map inline that it may be causing issue? I am, obviously not an expert here but would love some ideas or opinions

Answer 1

I've found a solution. I needed to get the map id from the generated script from MX Google Map. Didn't need to set the zoom either. Learning as I go!

$('a[data-toggle="tab"]').on('shown', function (e) { 
    for (var mapId in $.mxgoogleMaps.gMap) {
        google.maps.event.trigger($.mxgoogleMaps.gMap[mapId], 'resize');
        }; 
 });  // refire the map