Comment puis-je vérifier si Google Maps est entièrement chargé?

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

Existe-t-il un moyen de détecter automatiquement lorsque Google Maps est entièrement chargé, y compris les téléchargements de tuiles et tout?

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

Cela me dérangeait pendant un certain temps avec GMaps v3.

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

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 addListenerOnceméthode, le code dans la fermeture est exécuté la première fois que "inactif" est déclenché et ensuite l'événement est détaché.

Voir également la section des événements dans la référence Google Maps.

Je crée des applications mobiles html5 et j'ai remarqué que idle, bounds_changedettilesloaded les événements incendie lors de la création et rendu l'objet de la carte (même si ce n'est pas visible).

Pour que ma carte exécute du code lors de son premier affichage, j'ai fait ce qui 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
    });
});

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

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

Cela pourrait changer à l'avenir alors que l'API V3 évolue :-)

En 2018:

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

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

Si vous utilisez des composants Web , ils ont ceci comme exemple:

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

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

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

Lorsque la variable mapest un objet de type GMap2:

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

Dans mon cas, Tile Image chargée à partir d'une URL distante et tilesloaded événement a été déclenchée avant le rendu de l'image.

J'ai résolu de suivre le chemin sale.

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

Vous pouvez vérifier la GMap2.isLoaded()méthode toutes les nmillisecondes pour voir si la carte et toutes ses tuiles ont été chargées ( window.setTimeout()ou window.setInterval()sont vos amis).

Bien que cela ne vous donne pas l'événement exact de la fin du chargement, il devrait être suffisant pour déclencher votre Javascript.