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

Answer 1

Have you tried calling the resize event of the map?

Google Maps API - Map

Answer 2

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)

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