Google Maps API v3 and jQuery-UI Tabs

Question

I am using the new v3 of the Google Maps API. Basically the issue I have is that I have a Google Map within jQuery UI Tabs. The map is not in the first tab, so you have to click the tab to view the map, but it does not always render correctly. I.e. sometimes the map images are not correctly placed.

I had this problem when I was using v2 of the API, but I managed to resolve the problem by initializing my Map like this:

map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});

Unfortunately that doesn't work in v3. I had a look at the suggestions in this thread: http://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs

Nothing really worked for me, but I used one of the workarounds in that I initialize the map function on tab load:

$(function()
{
    $("#tabs-container").tabs({show: function(event, ui)
    {
        if(ui.panel.id == "viewmap")
        {
            mapiInitialize();
        }
    }});
});

This is all good but I much rather prefer for the map to be "there" when the user clicks on the tab. It sometimes takes a few seconds for the map to load up and all the user see's in that time is a plain gray background - some sort of loading indicator might have helped.

So does anybody have any suggestions? My markup and CSS is as follows:

<div id="tabs-container">
<ul>
    <li><a href="#details"><span>Details</span></a></li>

    <li><a href="#viewmap"><span>Location Map</span></a></li>

    <li><a href="#reviews"><span>Reviews (<?php echo $numrows; ?>)</span></a></li>
</ul>

<div id="details"><?php echo $details; ?></div>

<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;">
    <div id="map" style="height: 340px;"></div>
</div>

<div id="reviews"><?php echo $reviews; ?></div>

</div><!-- end tab-container -->

Answer 1

Once you switch to the tab that has the map call google.maps.events.trigger(map, 'resize'); that should then make it display correctly.