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.

score 5 · Accepted Answer · edited Jan 03 '13 at 00:33

5

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

edited Jan 03 '13 at 00:33

webaware

2,795
2
30
37

answered Dec 01 '11 at 10:39

Tomas

57,621
49
238
373

thanks tomas. the '-10000px' just seem bit hacky to me, but i will give it a go anyway. thanks!! – Rex Dec 01 '11 at 10:46
@Rex, just added one zero and it's elegant now! :-) – Tomas Dec 01 '11 at 10:58
@ Tomas haha, yes it works. but i still like to know how to delay constructing the map, or how to reload the map though :) – Rex Dec 01 '11 at 13:33
@Rex, reloading the map is done through the `google.maps.event.trigger(map, 'resize')` call. As for the "delay constructing map" - it's up to you when you construct the map object - it is you who calls the constructor! – Tomas Dec 01 '11 at 13:55

score 1 · Answer 2 · edited Oct 27 '12 at 21:48

1

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

edited Oct 27 '12 at 21:48

BenjaminRH

11,974
7
49
76

answered Mar 26 '12 at 16:07

msm2020

180
1
10

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

2 Answers2

Linked