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

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.