¿Cómo puedo verificar si Google Maps está completamente cargado?

293

Estoy incrustando Google Maps en mi sitio web. Una vez que se carga Google Maps, necesito iniciar algunos procesos de JavaScript.

¿Hay alguna forma de detectar automáticamente cuando Google Maps se ha cargado por completo, incluidas las descargas de mosaicos y todo?

Existe un tilesloaded()método que se supone que realiza exactamente esta tarea, pero no funciona .

Trigonometría
fuente
2
El evento "tileloaded" parece funcionar para mí. Se dispara cuando se carga la página y cuando muevo el mapa. En su mapa, ¿es simplemente inconsistente o nunca funciona?
Chris B
No simplemente no. "azulejos cargados" como dice se disparará cada vez que se carguen nuevos azulejos, lo que significa que no solo se disparará en la primera carga sino también cada vez que arrastre el mapa a la ubicación donde sus azulejos aún no se han cargado.
Aivus
Depende de si usas addListener () o addListenerOnce (). Tienes razón sobre addListener () - por eso lo usogoogle.maps.event.addListenerOnce(map, 'tilesloaded', function() {
vchrizz

Respuestas:

608

Esto me molestó por un tiempo con GMaps v3.

Encontré una manera de hacerlo así:

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

El evento "inactivo" se activa cuando el mapa pasa al estado inactivo: todo se cargó (o no se pudo cargar). Encontré que es más confiable que tilesloaded / limits_changed y usando el addListenerOncemétodo, el código en el cierre se ejecuta la primera vez que se activa "inactivo" y luego se desconecta el evento.

Consulte también la sección de eventos en la Referencia de Google Maps.

ddinchev
fuente
15
Se dispara cuando el mapa pasa al estado inactivo (no se cargará nada más). A veces puede haber algunos mosaicos que no se cargaron debido a una mala conexión, por lo que incluso si faltan piezas, se activará el evento inactivo al final. Si necesita asegurarse de que el mapa esté completo, que no falten mosaicos, etc., debe buscar otra forma (por ejemplo, evento "mosaico cargado").
ddinchev
15
no funciona para mí ... se dispara antes de que algo aparezca en mi mapa
zsitro
16
-1: se dispara antes de que se carguen / muestren los mosaicos.
zbr
11
-1: para mí en Chrome y Firefox, se dispara constantemente tan pronto como se carga el script, pero antes de que se muestre cualquier mosaico. Tal vez no sea aparente en una conexión rápida, pero estoy bendecida con una muy lenta. Sin embargo, 'tilesloaded' parece funcionar.
Xananax
1
Gracias por esa solución, creo que esto es exactamente lo que necesitaba. Lo que simplemente no puedo entender es por qué Google no ha puesto un simple gancho listo. : -O
hasse
55

Estoy creando aplicaciones móviles HTML5 y me di cuenta que el idle, bounds_changedy tilesloadedeventos de fuego cuando se crea y se hace (aunque no es visible) el mapa del objeto.

Para hacer que mi mapa ejecute el código cuando se muestra por primera vez, hice lo siguiente:

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    //this part runs when the mapobject is created and rendered
    google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        //this part runs when the mapobject shown for the first time
    });
});
Pyry Liukas
fuente
44
La primera función de mosaico funciona bien para mí, pero la segunda función de mosaico nunca funciona para mí.
Ganso
Me estoy poniendo Uncaught ReferenceError: map is not defined. He intentado ejecutar el script con retraso y al final de mis otros scripts, pero parece que nada funciona.
Sam Willis
1
si está definiendo controladores de eventos dentro de controladores de eventos, lo pasará mal. Te sugiero encarecidamente que no hagas esto, aquí hay una alternativa un poco menos hacky que logra algo similar: gist.github.com/cmawhorter/a1b0b6a6b73678b97920f748ebca244b
Cory Mawhorter
15

Si está utilizando la API de Maps v3, esto ha cambiado.

En la versión 3, esencialmente desea configurar un escucha para el bounds_changedevento, que se activará al cargar el mapa. Una vez que se haya activado, elimine el oyente ya que no desea recibir información cada vez que cambien los límites de la ventana gráfica.

Esto puede cambiar en el futuro a medida que evolucione la API V3 :-)

timbo
fuente
2
No encuentro que esto funcione para mí tan confiablemente como buscar el tilesloadedevento.
TMC
9

Si está utilizando componentes web , entonces tienen esto como ejemplo:

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});
Phillip Senn
fuente
3
Un comentario terrible, está mal en tantos niveles, no sé por dónde empezar.
noches del
1
¿Por qué dices "comentario terrible, está mal en tantos niveles que no sé por dónde empezar"?
Phillip Senn
3
Pero, ¿por qué proporcionar una solución con un marco diferente al de Google Maps?
noches
¿Porque es mejor tal vez?
Phillip Senn
HAHAHAHA @noches
Juan
5

GMap2::tilesloaded() sería el evento que estás buscando.

Ver GMap2.tilesloaded para referencias.

Adam Markowitz
fuente
He leído mucho sobre el evento tilesloaded () y parece que es extremadamente inconsistente cuando se dispara. ¿Alguna otra opción?
3

Donde la variable mapes un objeto de tipo GMap2:

    GEvent.addListener(map, "tilesloaded", function() {
      console.log("Map is fully loaded");
    });
Devlord
fuente
0

En mi caso, la imagen de mosaico cargada desde la URL remota y el tilesloadedevento se activaron antes de representar la imagen.

Lo resolví siguiendo el camino sucio.

var tileCount = 0;
var options = {
    getTileUrl: function(coord, zoom) {
        tileCount++;
        return "http://posnic.com/tiles/?param"+coord;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.5,
    isPng: true
};
var MT = new google.maps.ImageMapType(options);
map.overlayMapTypes.setAt(0, MT);
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    var checkExist = setInterval(function() {
        if ($('#map_canvas > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > div').length === tileCount) {
            callyourmethod();
            clearInterval(checkExist);
        }
    }, 100); // check every 100ms
});
Bala
fuente
-4

Puede verificar el GMap2.isLoaded()método cada nmilisegundos para ver si el mapa y todos sus mosaicos se cargaron ( window.setTimeout()o window.setInterval()son sus amigos).

Si bien esto no le dará el evento exacto de la finalización de la carga, debería ser lo suficientemente bueno como para activar su Javascript.

fbuchinger
fuente