Google Maps API v3, jQuery UI Tabs, map not resizing

Question

I am using Google Maps API v3, being displayed on a jQuery UI Tab. I have been struggling with triggering my google map to resize correctly when the tab displaying the map is selected. The jQuery documentation here http://docs.jquery.com/UI/Tabs provides that:

For Google maps you can also resize the map once the tab is displayed like this:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

No matter what I try, the above code will not work for me.

The following code works insofar as it will display an alert when I select tab 9. For this reason, I know that at least I am correctly isolating the right trigger event. Here is the code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            alert("Alert is working");
        }                                         
    });
});

When I alter this code to include the recommended resizeMap(); command, it does not work. Instead, what it does is append the characters "#tabs-9" to the end of the url, and then it does not even select the correct tab 9. I cannot even see tab 9 when I use this code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            resizeMap();
        }                                         
    });
});

Finally, when I alter the code to include a different resize command "google.maps.event.trigger(map, 'resize');", it still does not work. Instead, it does allow me to select the correct tab 9, and it does not append the characters to the end of the URL as in the case above, but it will not resize the map. The map still display only partially complete and has gray bands on the right. Here is the code:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
           google.maps.event.trigger(map, 'resize');
        }                                         
    });
});

Any ideas what I can try next? I'm stumped. Thanks.

Answer 1

Add the following to your tabs constructor:

$(function() {
    $("#myTabs").tabs({
        show: function(e, ui) {
            if (ui.index == 0) {
                google.maps.event.trigger(myMap, "resize");
            }
        }
    });
});

You should test ui.index for the 0-based index of the panel that contains your Google map, and of course update references to myMap and #myTabs.

See the Events section of the Map object documentation for more information about dispatching a resize event trigger.