Keep a Google Maps v3 Map Hidden, show when needed

Question

Hi,

Is there a way of preventing Google Maps (JS, v3) of being displayed from the get-go ? I do some pre-processing and would like to show my 'Loading' spinner until everything is good to go (more eloquently put, hide the map -- e.g. the container div -- until all preprocessing is complete -- at which point, show the map).

Hooking to the map's 'idle' event doesn't help that much, since the map is already displayed when this event hits.

I know that the container div gets inline-styled by GMaps after loading, my first idea is to clear out the style attr (whilst listening to 'idle'), but it would be interesting to see if there is a way of creating the map and not displaying it until all pre-processing is done.

Maybe by using an argument to the new google.maps.Map constructor, or a MapOption ?

Any thoughts on this ?

Thank you in advance !

Answer 1

Also remember to call google.maps.event.trigger(map, 'resize'); if you have changed the size of the div (A display:none div has no size :) )