Mantener un mapa de Google Maps v3 oculto, mostrar cuando sea necesario

Question

¿Hay alguna manera de evitar que se muestre un mapa de Google Maps (JS, v3) desde el principio? Estoy haciendo un preprocesamiento y me gustaría mostrar mi spinner 'Loading' hasta que todo esté listo (más elocuentemente, oculte el mapa, por ejemplo, el contenedor div) hasta que se complete todo el procesamiento previo, y en ese momento , muestra el mapa).

Conectar el evento idle del mapa no ayuda mucho, ya que el mapa ya se muestra cuando se produce este evento.

sé que el contenedor div pone en línea labrado por GMaps después de la carga, mi primera idea era limpiar el atributo style (mientras escucha el evento idle), pero sería interesante ver si hay una manera de crear el mapa y no mostrarlo hasta que se complete todo el procesamiento previo.

¿Quizás usando un argumento para el constructor new google.maps.Map, o un MapOption?

¿Alguna idea de esto?

¡Gracias de antemano!

Answer 1

Asimismo, recuerda a llamar:

google.maps.event.trigger(map, 'resize'); 

si ha cambiado el tamaño de la <div>. A display:none<div> no tiene talla.

Answer 2

mejor manera:

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

y en el programa de evento click:

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

Answer 3

dependiendo de lo que está haciendo otra posibilidad podría ser la de tener múltiples Bools se establece en true cuando cada proceso se realiza .

Por ejemplo:

si tiene un rodaje servicio de geocodificación que quiere esperar, usted podría tener una var llamada GeoState

y en la parte resultado de la GeoState conjunto geocodificador en true, luego haga una comprobación de función cronometrada si todos los servicios se han devuelto verdaderos, cuando lo hayan hecho, haga que el mapa sea visible.

Answer 4

Esto funciona para mí. Estoy usando la biblioteca JQuery.

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

Answer 5

O simplemente podría ocultarlo como con css visablility o css opacity.

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

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

Answer 6

esto funciona bien para mí, utilizo pestañas jQuery

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 este enlace https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Answer 7

Esto funcionará

google.maps.event.addListener(map, "idle", function() 
    { 
     google.maps.event.trigger(map, 'resize'); 
    });