How do I hide and then reveal a map canvas using Google Maps 3?

Question

I'd like to render a Google Maps canvas to a hidden div and then, when an event is triggered elsewhere on the page, make the div visible again.

Unfortunately, when I try styling the div with "display:none" and then later displaying it, I get just a gray box where the map would be. If I eliminate the display:none tag and the showing logic, the map works fine.

Anyone have any ideas?

Answer 1

Set the div's opacity to 0.01 or some such - that makes it practically invisible.

Answer 2

You can toggle visibility: hidden on; that will make everything keep its dimensions (while still remaining invisible). This would help if Google is asking the page for how wide and tall it is. Keep in mind with visibility: hidden the map canvas will still take up space in the page; if this is not something you want then you can do something like position: absolute.

Answer 3

Got this to work by setting the map's div to position:absolute and left:-10000px.

Then I just set the position to inherit when I want it to appear.