Discussion :

[yves51]

Bonjour,

J'ai un problème sur Google Map Api.

J'ai un tableau avec plusieurs polygones représentant divers quartiers. Le code ci-dessous réussit à afficher chaque quartier à l'aide d'une boucle, cependant pour les évènements liés cela ne fonctionne pas.

En effet je souhaite modifier la couleur du polygone avec la fonction setOptions({fillColor: "#33FF33"}); , qui fonctionne bien quand le polygone n'est pas une ligne d'un tableau.

Y-a-t-il une erreur dans mon code ? Je tourne en rond....

Merci pour votre aide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
for (var i = 0, maxi; maxi = quartierCoord[i]; i++) {
 
PolygoneQuartier[i] = new google.maps.Polygon({
    paths: quartierCoord[i], //Données remplies plus haut dans le code
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
   nom: quartierNom[i]
  });
PolygoneQuartier[i].setMap(map);
 
  // EVENEMENTS SUR QUARTIERS
 
  google.maps.event.addListener(PolygoneQuartier[i], 'mouseover',function(event) {
  PolygoneQuartier[i].setOptions({fillColor: "#33FF33"});
});
 
 
  google.maps.event.addListener(PolygoneQuartier[i], 'mouseout',function(event) {
  PolygoneQuartier[i].setOptions({fillColor: "#FF0000"});
});
 
  google.maps.event.addListener(PolygoneQuartier[i], 'click',function(event) {
  PolygoneQuartier[i].setOptions({fillColor: "#006aff"});
});
        }

[yves51]

En fait cela marche très bien si je laisse le même code et que j'écris var i=0; par exemple, le problème vient de la boucle...

[NoSmoking]

Bonjour,
on soucis est bien connu et décrit dans : Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?.

Pour remédier à cela, outre les méthodes données dans le lien ci-dessus, il en existe une « moderne » avec l'avènement de l'ES6 qui consiste à remplacer var i=0 par let i=0 dans ta boucle for.

Ressource :
 ↪ Déclarer une variable avec let.

[yves51]

Super, merci beaucoup.

Cela fonctionne dans tous les navigateurs ?

[NoSmoking]

Cela fonctionne dans tous les navigateurs ?

Il faut lire les liens jusqu'au bout et regarder les annotations.

En substance pour IE11 l'utilisation de let dans une boucle for est « bogguée ».

Pour voir ce qui se passe il suffit de tester ces quelques lignes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
for (let i = 0; i < 5; i += 1) {
    setTimeout(function () {
        console.log(i);
    }, 10)
}

le résultat pour tous sauf IE11

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

>> 0, 1, 2, 3, 4

et pour IE11

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

>> 5, 5, 5, 5, 5