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

Question

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.

Answer 1

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;
}

Answer 2

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();
});