CODEWITHSUNDEEP
jquery-uigoogle-maps-api-3jquery-ui-tabs
MAX POWER
MAX POWER

Reputation: 5438

Google Maps API v3 and jQuery-UI Tabs

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

Upvotes: 0

Views: 4273

Answers (3)

Hassaan
Hassaan

Reputation: 932

Try this when you are initializing your jQuery UI tabs:

$("#tabs-container").tabs({                    
    show: function(event, ui) {
        google.maps.event.trigger(map, 'resize');
    }                    
});

Note: You will have to initialize the map before you initialize the tabs.

Upvotes: 2

Mark Zer
Mark Zer

Reputation: 51

just use

map.setZoom( map.getZoom() );

Upvotes: 1

skarE
skarE

Reputation: 5890

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

Upvotes: 1

Related Questions