6

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

Lee
  • 20,034
  • 23
  • 75
  • 102

3 Answers3

26

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.

Steve Ross
  • 1,228
  • 10
  • 21
Sudhir Jonathan
  • 16,998
  • 13
  • 66
  • 90
  • 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 ? – Lee Sep 23 '10 at 22:22
  • Aghh I got it. I am using a jQuery plugin. $.googleMaps.gMap – Lee Sep 23 '10 at 22:25
  • 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? – Bill Nov 04 '10 at 14:37
  • Sure... just make it's called after the div is displayed. If its an animated opening, then after the animation fully completes. – Sudhir Jonathan Nov 04 '10 at 16:41
  • 1
    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! – KingCronus Oct 22 '12 at 13:36
3

Have you tried calling the resize event of the map?

Google Maps API - Map

Jay
  • 901
  • 1
  • 8
  • 18
2

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);
});
Chris Broadfoot
  • 5,082
  • 1
  • 29
  • 37