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>

<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>

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

1 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.