Keep a Google Maps v3 Map hidden, show when needed

Question

Is there a way of preventing a Google Maps (JS, v3) map being displayed from the get-go? I'm doing 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 pre-processing is complete – at which point, show the map).

Hooking up 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 was to clear out the style attribute (whilst listening to the idle event), 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

better way:

gmap.redraw = function() {
    gmOnLoad = true;
    if(gmOnLoad) {
        google.maps.event.trigger(gmap, "resize");
        gmap.setCenter(gmlatlng);
        gmOnLoad = false;
    }
}

and in show click event:

$("#goo").click(function() {
  if ($("#map_canvas").css("display") == "none") {
    $("#YMapsID").toggle();
    $("#map_canvas").toggle();
    if (gmap != undefined) {
        gmap.redraw();
    }
  }
});

Answer 2

another way to show the hidden map when map is first time rendering the <div> is to set style: visibility.

When firstly hidden, use visibility = hidden; to show use visibility = visible

the reason is: visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.