Come posso verificare se Google Maps è completamente caricato?

Sto incorporando Google Maps nel mio sito web. Una volta caricato Google Maps, devo avviare alcuni processi JavaScript.

C'è un modo per rilevare automaticamente quando Google Maps è stato caricato completamente, compresi i download di riquadri e tutto il resto?

tilesloaded()Esiste un metodo che dovrebbe svolgere esattamente questo compito ma non funziona .

Questo mi ha infastidito per un po 'con GMaps v3.

Ho trovato un modo per farlo in questo modo:

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

L'evento "inattivo" viene attivato quando la mappa passa allo stato inattivo: tutto viene caricato (o non è stato caricato). Ho trovato più affidabile di tilesloaded / bounds_changed e usando il addListenerOncemetodo il codice nella chiusura viene eseguito la prima volta che viene attivato "inattivo" e quindi l'evento viene rimosso.

Vedi anche la sezione eventi nella Guida di riferimento di Google Maps.

Sto creando HTML5 applicazioni mobili e ho notato che il idle, bounds_changede tilesloadedgli eventi fuoco quando l'oggetto viene creato e reso mappa (anche se non è visibile).

Per fare in modo che la mia mappa esegua il codice quando viene mostrato per la prima volta, ho fatto quanto segue:

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

Se stai utilizzando l'API di Maps v3, questo è cambiato.

Nella versione 3, devi essenzialmente impostare un listener per l' bounds_changedevento, che si attiverà al caricamento della mappa. Una volta attivato, rimuovere l'ascoltatore poiché non si desidera essere informati ogni volta che cambiano i limiti del viewport.

Questo potrebbe cambiare in futuro mentre l'API V3 si sta evolvendo :-)

Nel 2018:

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

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

Se stai utilizzando componenti Web , hanno questo come esempio:

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

GMap2::tilesloaded() sarebbe l'evento che stai cercando.

Vedi GMap2.tilesloaded per i riferimenti.

Dove la variabile mapè un oggetto di tipo GMap2:

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

Nel mio caso, l'immagine della piastrella caricata dall'URL remoto e l' tilesloadedevento è stata attivata prima del rendering dell'immagine.

Ho risolto seguendo il modo sporco.

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

Puoi controllare il GMap2.isLoaded()metodo ogni nmillisecondi per vedere se la mappa e tutte le sue tessere sono state caricate ( window.setTimeout()o window.setInterval()sono tuoi amici).

Anche se questo non ti darà l'evento esatto del completamento del caricamento, dovrebbe essere abbastanza buono da attivare il tuo Javascript.