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

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 .

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.

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
    });
});

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 :-)

En 2018:

var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })

https://developers.google.com/maps/documentation/javascript/events

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

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});

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

Ver GMap2.tilesloaded para referencias.

Donde la variable mapes un objeto de tipo GMap2:

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

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
});

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.