web-dev-qa-db-fra.com

Comment puis-je vérifier si Google Maps est complètement chargé?

J'intègre Google Maps dans mon site Web. Une fois que Google Maps est chargé, je dois lancer quelques processus JavaScript.

Existe-t-il un moyen de détecter automatiquement le chargement complet de Google Maps, y compris les téléchargements de mosaïques et tout?

Il existe une méthode tilesloaded() supposée accomplir exactement cette tâche mais cela ne fonctionne pas .

javascripthtmlgoogle-maps
285
happygilmore892

Cela me dérangeait pendant un moment avec GMaps v3.

J'ai trouvé un moyen de le faire comme ça:

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

L'événement "inactif" est déclenché lorsque la carte passe à l'état inactif - tout est chargé (ou n'a pas pu être chargé). Je l'ai trouvé plus fiable que tilesloaded/bounds_changed et en utilisant la méthode addListenerOnce, le code de la fermeture est exécuté la première fois que "inactif" est déclenché, puis l'événement est détaché.

Voir aussi le section événements dans le document de référence de Google Maps.

591
ddinchev

Je crée des applications mobiles html5 et j'ai remarqué que les événements idle, bounds_changed et tilesloaded se déclenchent lorsque l'objet de la carte est créé et rendu (même s'il n'est pas visible).

Pour rendre mon code d’exécution de la carte lorsqu’il s’affiche pour la première fois, j’ai procédé comme suit:

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
    });
});
55
Pyry Liukas

Si vous utilisez l'API Maps v3, cela a changé.

Dans la version 3, vous voulez essentiellement configurer un écouteur pour l'événement bounds_changed, qui se déclenchera lors du chargement de la carte. Une fois que cela s'est déclenché, supprimez le programme d'écoute, car vous ne souhaitez pas être informé à chaque modification des limites de la fenêtre.

Cela pourrait changer à l'avenir avec l'évolution de l'API V3 :-)

15
timbo

Si vous utilisez composants Web , leur exemple est le suivant:

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

En 2018:

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

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

7
haffla

GMap2::tilesloaded() serait l'événement que vous recherchez.

Voir GMap2.tilesloaded pour les références.

4
Adam Markowitz

Où la variable map est un objet de type GMap2:

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

Dans mon cas, l'image de mosaïque chargée à partir de l'URL distante et l'événement tilesloaded ont été déclenchés avant le rendu de l'image.

J'ai résolu en suivant le sale chemin.

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