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


293

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 .


2
L'événement "tilesloaded" semble fonctionner pour moi. Il se déclenche lorsque la page se charge et lorsque je déplace la carte. Sur votre carte, est-ce juste incohérent ou ça ne marche jamais?
Chris B

Non, juste non. "tilesloaded", comme il est dit, sera tiré à chaque fois que de nouvelles tuiles seront chargées, ce qui signifie qu'il se déclenchera non seulement au premier chargement, mais également à chaque fois que vous glisserez la carte vers un emplacement où vos tuiles n'ont pas encore été chargées.
Aivus

Dépend si vous utilisez addListener () ou addListenerOnce (). Vous avez raison sur addListener () - c'est pourquoi j'utilisegoogle.maps.event.addListenerOnce(map, 'tilesloaded', function() {
vchrizz

Réponses:


608

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.


15
Il est déclenché lorsque la carte passe à l'état inactif (rien de plus ne se charge). Parfois, il peut y avoir des tuiles qui ne se sont pas chargées en raison d'une mauvaise connexion, donc même s'il y a de telles pièces manquantes, cela déclenchera l'événement inactif à la fin. Si vous devez vous assurer que la carte est complète, qu'il n'y a pas de tuiles manquantes, etc., vous devriez chercher une autre manière (par exemple, l'événement "tilesloaded").
ddinchev

15
cela ne fonctionne pas pour moi .. se déclenche avant que quoi que ce soit
n'apparaisse

16
-1: se déclenche plus tôt que les tuiles sont chargées / affichées.
2013

11
-1: pour moi dans chrome et firefox, il se déclenche systématiquement dès que le script est chargé mais avant que la tuile ne s'affiche. Ce n'est peut-être pas évident sur une connexion rapide, mais je suis béni avec une connexion très lente. 'tilesloaded' semble cependant fonctionner.
Xananax

1
Merci pour cette solution - je pense que c'est exactement ce dont j'avais besoin. Ce que je ne peux tout simplement pas comprendre, c'est pourquoi Google n'a pas mis un simple crochet prêt à l'emploi? : -O
hasse

55

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

4
La première fonction tuiles chargée fonctionne bien pour moi, mais la deuxième fonction tuiles chargée ne fonctionne jamais pour moi.
Goose

Je reçois Uncaught ReferenceError: map is not defined. J'ai essayé d'exécuter le script avec un retard et à la fin de mes autres scripts mais rien ne semble fonctionner.
Sam Willis

1
si vous définissez des gestionnaires d'événements à l'intérieur des gestionnaires d'événements, vous allez vous amuser. je vous suggère fortement de ne pas le faire, voici une alternative un peu moins hacky qui réalise une chose similaire: gist.github.com/cmawhorter/a1b0b6a6b73678b97920f748ebca244b
Cory Mawhorter

15

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


2
Je ne trouve pas que cela fonctionne pour moi de manière aussi fiable que la recherche de l' tilesloadedévénement.
TMC


9

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

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

3
Commentaire horrible, son tort à tant de niveaux ne sait pas par où commencer.
nuits

1
Pourquoi dites-vous "Commentaire terrible, c'est faux à tant de niveaux que je ne sais pas par où commencer"?
Phillip Senn du

3
Mais pourquoi proposer une solution utilisant un framework différent de celui de google maps?
nuits

Parce que c'est mieux peut-être?
Phillip Senn

HAHAHAHA @nights
Juan

5

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

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


J'ai beaucoup lu sur l'événement tilesloaded () et il semble qu'il soit extrêmement incohérent quand il se déclenche. D'autres options?

3

Lorsque la variable mapest un objet de type GMap2:

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

0

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

-4

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.