Wie kann ich überprüfen, ob Google Maps vollständig geladen ist?

Ich binde Google Maps in meine Website ein. Sobald Google Maps geladen ist, muss ich einige JavaScript-Prozesse starten.

Gibt es eine Möglichkeit, automatisch zu erkennen, wann Google Maps vollständig geladen wurde, einschließlich Kacheldownloads und allem?

Es tilesloaded()gibt eine Methode, die genau diese Aufgabe erfüllen soll, aber nicht funktioniert .

Das hat mich eine Weile mit GMaps v3 gestört.

Ich habe einen Weg gefunden, es so zu machen:

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

Das Ereignis "Leerlauf" wird ausgelöst, wenn die Karte in den Ruhezustand wechselt - alles geladen (oder nicht geladen). Ich fand es zuverlässiger als tilesloaded / bounds_changed und unter Verwendung der addListenerOnceMethode wird der Code im Closure ausgeführt, wenn "idle" zum ersten Mal ausgelöst wird und dann das Ereignis getrennt wird.

Siehe auch den Abschnitt "Ereignisse" in der Google Maps-Referenz.

Ich erstelle mobile HTML5-Apps und habe festgestellt, dass die und Ereignisse ausgelöst werden idle, wenn das Kartenobjekt erstellt und gerendert wird (auch wenn es nicht sichtbar ist).bounds_changedtilesloaded

Damit meine Karte beim ersten Anzeigen Code ausführt, habe ich Folgendes getan:

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

Wenn Sie die Maps API v3 verwenden, hat sich dies geändert.

In Version 3 möchten Sie im Wesentlichen einen Listener für das bounds_changedEreignis einrichten , der beim Laden der Karte ausgelöst wird. Entfernen Sie nach dem Auslösen den Listener, da Sie nicht jedes Mal informiert werden möchten, wenn sich die Grenzen des Ansichtsfensters ändern.

Dies kann sich in Zukunft ändern, wenn sich die V3-API weiterentwickelt :-)

Im Jahr 2018:

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

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

Wenn Sie Webkomponenten verwenden , haben diese Folgendes als Beispiel:

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

GMap2::tilesloaded() wäre das Ereignis, das Sie suchen.

Referenzen finden Sie unter GMap2.tilesloaded .

Wo die Variable mapein Objekt vom Typ GMap2 ist:

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

In meinem Fall wurde das von der Remote-URL und dem tilesloadedEreignis geladene Kachelbild ausgelöst, bevor das Bild gerendert wurde.

Ich löste mit folgendem schmutzigen Weg.

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

Sie können die GMap2.isLoaded()Methode alle nMillisekunden überprüfen , um festzustellen, ob die Karte und alle ihre Kacheln geladen wurden ( window.setTimeout()oder window.setInterval()Ihre Freunde sind).

Dies gibt Ihnen zwar nicht das genaue Ereignis des Ladevorgangs, sollte jedoch gut genug sein, um Ihr Javascript auszulösen.