CODEWITHSUNDEEP
jqueryjquery-uigoogle-mapsgoogle-maps-api-3jquery-tabs
Rex
Rex

Reputation: 125

Google Map API V3 on hidden div (jquery-ui tabs)

I know this problem is ancient, but I can't seem to find a clear instruction for it.

The gist of the problem is the Google Map wouldn't load completely (partly shown) when it's loaded on a hidden (display:none) divs, e.g. jQuery tabs, etc.

API V3 wouldn't accept checkResize() any more, the 'left:-1000px' is not an elegant solution.

I've heard delaying constructing the map, and reload the map when click the tabs, but please help me on the exact codes.

Upvotes: 3

Views: 4090

Answers (2)

Tomas
Tomas

Reputation: 59435

Why do you say "left:-1000px' is not an elegant solution"? It works for me greatly in API v2 and should work also for API v3 (not tested, let me know if it doesn't work).

Redraw, i.e. API v2 checkResize() is accomplished this way in API v3:

google.maps.event.trigger(map, 'resize');

Here is an example of my CSS for jquery-ui tabs (inspired by http://jqueryui.com/demos/tabs/):

.ui-tabs .ui-tabs-hide#my_tabs-1 { /* my_tabs-1 contains google map */
    display: block !important;
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

Upvotes: 5

msm2020
msm2020

Reputation: 181

In case you can't depend on a Tab Show event you can add the event on Tab Link click event instead of calling initialize() on page ready.

$('#TabLink').click(function() {
    initialize();
});

Upvotes: 1

Related Questions