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