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

293

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 .

TRiG
quelle
2
Das Ereignis "Kacheln geladen" scheint für mich zu funktionieren. Es wird ausgelöst, wenn die Seite geladen wird und wenn ich die Karte bewege. Ist es auf Ihrer Karte nur inkonsistent oder funktioniert es nie?
Chris B
Nein einfach nein. "Kacheln geladen" wird jedes Mal ausgelöst, wenn neue Kacheln geladen werden. Dies bedeutet, dass es nicht nur beim ersten Laden ausgelöst wird, sondern auch jedes Mal, wenn Sie die Karte an einen Ort ziehen, an dem Ihre Kacheln noch nicht geladen wurden.
Aivus
Hängt davon ab, ob Sie addListener () oder addListenerOnce () verwenden. Sie haben Recht mit addListener () - deshalb benutze ichgoogle.maps.event.addListenerOnce(map, 'tilesloaded', function() {
vchrizz

Antworten:

608

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.

ddinchev
quelle
15
Es wird ausgelöst, wenn die Karte in den Ruhezustand wechselt (es wird nichts mehr geladen). Manchmal gibt es einige Kacheln, die aufgrund einer schlechten Verbindung nicht geladen wurden. Selbst wenn solche Teile fehlen, wird am Ende das Leerlaufereignis ausgelöst. Wenn Sie sicherstellen möchten, dass die Karte vollständig ist, keine fehlenden Kacheln usw. vorhanden sind, sollten Sie einen anderen Weg suchen (z. B. das Ereignis "Kacheln geladen").
Ddinchev
15
es funktioniert nicht für mich .. wird
ausgelöst,
16
-1: Trigger früher als Kacheln geladen / angezeigt werden.
27.
11
-1: Für mich in Chrome und Firefox wird es regelmäßig ausgelöst, sobald das Skript geladen wurde, aber bevor eine Kachel angezeigt wird. Vielleicht ist es bei einer schnellen Verbindung nicht ersichtlich, aber ich bin mit einer sehr langsamen gesegnet. 'tilesloaded' scheint jedoch zu funktionieren.
Xananax
1
Vielen Dank für diese Lösung - ich denke, das ist genau das, was ich brauchte. Was ich einfach nicht um meinen Kopf wickeln kann, ist, warum um alles in der Welt Google keinen einfachen fertigen Haken gesetzt hat? : -O
hassen
55

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
    });
});
Pyry Liukas
quelle
4
Die erste Funktion zum Laden von Kacheln funktioniert gut für mich, aber die zweite Funktion zum Laden von Kacheln wird für mich nie ausgeführt.
Gans
Ich bekomme Uncaught ReferenceError: map is not defined. Ich habe versucht, das Skript mit Verzögerung und am Ende meiner anderen Skripte auszuführen, aber nichts scheint zu funktionieren.
Sam Willis
1
Wenn Sie Ereignishandler in Ereignishandlern definieren, werden Sie eine schlechte Zeit haben. Ich würde dringend empfehlen, dass Sie dies nicht tun. Hier ist eine etwas weniger hackige Alternative, die etwas Ähnliches erreicht: gist.github.com/cmawhorter/a1b0b6a6b73678b97920f748ebca244b
Cory Mawhorter
15

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

Timbo
quelle
2
Ich finde, dass dies für mich nicht so zuverlässig funktioniert wie die Suche nach der tilesloadedVeranstaltung.
TMC
9

Wenn Sie Webkomponenten verwenden , haben diese Folgendes als Beispiel:

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});
Phillip Senn
quelle
3
Schrecklicher Kommentar, es ist auf so vielen Ebenen falsch, dass man nicht weiß, wo man anfangen soll.
Nächte
1
Warum sagst du "Schrecklicher Kommentar, es ist auf so vielen Ebenen falsch, dass ich nicht weiß, wo ich anfangen soll"?
Phillip Senn
3
Aber warum eine Lösung mit einem anderen Framework als nur Google Maps anbieten?
Nächte
Weil es vielleicht besser ist?
Phillip Senn
HAHAHAHA @nights
Juan
5

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

Referenzen finden Sie unter GMap2.tilesloaded .

Adam Markowitz
quelle
Ich habe viel über das Ereignis tilesloaded () gelesen und es scheint, dass es beim Auslösen äußerst inkonsistent ist. Irgendwelche anderen Optionen?
3

Wo die Variable mapein Objekt vom Typ GMap2 ist:

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

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
});
Bala
quelle
-4

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.

fbuchinger
quelle