13

Estoy usando Google Maps API v3 en un sitio web que estoy desarrollando. Tengo un cuadro desplegable debajo de mi mapa que permite al usuario cambiar entre diferentes conjuntos de marcadores que se mostrarán en el mapa. Cada marcador se muestra usando marker.setMap().API de Google Maps API v3: ¿hay un operador de devolución de llamada o evento para un evento setMap()?

Mi problema es que el mapa a veces lleva mucho tiempo mostrar los nuevos marcadores, especialmente en IE. Quiero mostrar una animación de "Cargando" mientras el mapa cambia de marcador. Pero no sé cómo detectar cuándo el mapa ha terminado de mostrar los nuevos datos (no hay carga de página, ya que todo esto es AJAX). ¿Hay un receptor de devolución de llamada o evento para un evento setMap(), así que puedo llamar a una función para detener la animación "Cargando" cuando el último marcador ha terminado de cargarse?

Respuesta

21

No parece haber un oyente de devolución de llamada o evento para setMap(), pero descubrí una manera de lograr lo que quería. Estoy cargando Google Map usando jQuery. Aquí está mi código.

Al inicializar el mapa, configuré un detector para el evento 'inactivo', que oculta la animación de "carga". El evento 'inactivo' se activa cada vez que el mapa se terminó volver a dibujar después de un desplazamiento o zoom de cambio:

google.maps.event.addListener(this.map, 'idle', function() { 
$('#loading').hide(); 
}); 

Y en mi función para borrar las superposiciones, se muestra por primera vez la animación de carga, a continuación, desactive cada marcador usando setMap (null) Luego, recentro ligeramente el mapa cambiando la longitud por .000000001. Esto ocurre después de todas las llamadas a setMap() y activa el evento 'inactivo' que oculta la animación de carga.

// clear overlays from the map 
function clearOverlays() { 
$('#loading').show(); 

// clear the markers from the active data array 
if (activeData) { 
    for (i in activeData) { activeData[i].setMap(null); } 
} 
activeData = ''; 

// very slightly recenter the map to trigger the 'idle' event 
var centerlat = MYMAP.map.getCenter().lat(); 
var centerlng = MYMAP.map.getCenter().lng() + .000000001; 
recenter = new google.maps.LatLng(centerlat, centerlng); 
MYMAP.map.setCenter(recenter); 
} 

Es un poco hackeo, pero espero que alguien más lo encuentre útil.

+2

Sí He encontrado esto útil –

+1

Probé cosa similir lograr. Creo preloader en el inicio "inactivo", luego render clusterers marcadores y cuando todos los clusteres y markeres se establecieron en el mapa, ocultar preloader. Pero no funcionó como se esperaba. El preloader no se mostró (en DOM sí, pero desapareció inmediátamente, no CSS aplaudido). Tu hack me salvó el día. – exoslav

Cuestiones relacionadas