Google map display from a hidden area

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

Answers


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.


Have you tried calling the resize event of the map?

Google Maps API - Map


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

Need Your Help

How to find which promises are unhandled in Node.js UnhandledPromiseRejectionWarning?

node.js promise async-await warnings unhandled-exception

Node.js from version 7 has async/await syntactic sugar for handling promises and now in my code the following warning comes up quite often:

Can I install gems with apt-get on Ubuntu?

ruby-on-rails ruby ubuntu rubygems

I am new to Ruby and just diving in. The Ruby tutorial says I should get the packaging system from here: http://rubyforge.org/frs/?group_id=126