Google map display from a hidden area

Question

I really hope someone can advise on displaying a google map from a hidden div.

I have a google map which I want to show a user if they click on a link ie, Show Map.

Putting the map in a hidden div just does not work at all so I went with hiding the map -1000px on a position absolute css value.

This has given me much better results but when I use css to bring the map back in only have of it shows.

http://screencast.com/t/MTMyOGZmNW

Can anyone give me advise on the best way to have a hidden map become visible after I peform a show ?

Hope someone can advise.

Thanks

Masinissa

Answer 1

You needn't bother with the absolute position and all that. Let the div be hidden until necessary, then show it and call google.maps.event.trigger(map, 'resize')(v3) or map.checkResize()(v2)

Additional scenario mentioned in comments:

Make sure you call google.maps.event.trigger(map, 'resize') BEFORE calling map.fitBounds() or you will get unexpected results.

Mating

Hey Thank you. I tried map.checkResize() for V2 and im getting error map is not defined. And yes I know I am using v2. Any suggestions ? – Masinissa

Aghh I got it. I am using a jQuery plugin. $.googleMaps.gMap – Masinissa

When do you call the google.maps.event.trigger(map, 'resize') ? can you put that on the onclick event of the div that is hidden (and then displayed) when you click on the link? – Acquirement

Sure... just make it's called after the div is displayed. If its an animated opening, then after the animation fully completes. – Mating

Just wanted to add to this...if you have been using the map.fitBounds() method you will need to make sure the call to that is done after this trigger! – Lunate

Answer 2

Have you tried calling the resize event of the map?

Google Maps API - Map

Sporophyll

Answer 3

Why not defer rendering of the map until the div is shown?

rough code:

$("button").click(function() {
   $(mapDiv).show();
   new google.maps.Map(mapDiv, opts);
});

Mic

And if it is repeatedly hidden & shown? Aren't you creating many map objects but never destroying them. – Shalloon