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

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.

Answer 2

Have you tried calling the resize event of the map?

Google Maps API - Map

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