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 e

Answer 1

depending on what you are doing another posibility could be to have multiple bools you set to true when each process is done.

For example:

if you have a geocode service running which you want to wait for, you could have a var called GeoState

and in the result part of the geocoder set GeoState to true, then have a timed function check if all the services have returned true, when they have, make the map visible.

Answer 2

this works fine for me, I use jquery tabs

setTimeout(function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter(new google.maps.LatLng(default_lat, default_lng));
        map.setZoom(default_map_zoom);
    }, 2000);

om this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Answer 3

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 4

This works for me. I'm using the JQuery library.

$(document).ready(function(){
    $('#Checkbox').click(function(){
        $('#googleMapDiv').toggle();
        initialize(); // initialize the map
    });
});

Answer 5

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.

Answer 6

Or you could just hide it like with css visablility or css opacity.

$("#GoogleMap").css({ opacity: 0, zoom: 0 });
initialize();

google.maps.event.addListener(map,"idle", function(){ 
     $('#Loader').hide();
     $("#GoogleMap").css({ opacity: 1, zoom: 1 });
});