Discussion :

[jmnicolas]

Bonjour,

je suis sur une appli Google Maps : sur ma carte je dois afficher des marqueurs (qui sont en fait des arrêts de bus) à partir d'un fichier XML.

Jusque là tout va bien, par contre lorsque je veux ajouter chaque marqueur au gestionnaire d'événements (GEvent.addListener) il ne prend en compte que le dernier de ma liste, ce qui fait que tous mes marqueurs affichent le même contenu lorsqu'on clique dessus.

Voici le bout de code concerné :

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
// pour chaque élément du tableau on crée un marqueur
                for (var i = 0; i < arrets.length; i++)
                 {
                    // on récupère les infos de chaque arrêt
                    var codArret = arrets[i].getAttribute("cod");
                    var nomArret = arrets[i].getAttribute("nom");
                    var lat = parseFloat(arrets[i].getAttribute("lat"));
                    var lon = parseFloat(arrets[i].getAttribute("lon"));
 
 
                    // on définit les coordonnées du marqueur
                    var point = new GLatLng(lat, lon);
 
                    // on crée le marqueur avec les coordonnées
                    var marker = new GMarker(point);
                    marker.value = codArret ;
 
                    // on l'ajoute au gestionnaire d'événements
                    GEvent.addListener (marker, "click", function()
                    {
                        marker.openInfoWindowHtml (nomArret + ' (' + codArret + ')');
                    });
 
                    // on place le marqueur sur la carte
                    map.addOverlay(marker);
                }

A noter que j'ai fait un test en rentrant manuellement 2 marqueurs en spécifiant des variables différentes (var nomArret1 et var nomArret2) et ça marche comme ça.

Je suppose donc qu'il y a un soucis dans la visibilité de mes variables, mais vu que c'est mon premier code en javascript je vois pas où est le soucis.

[Invité]

Salut,

En passant le marqueur en paramètre:

Code :

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

1
2
3
4
5
// on l'ajoute au gestionnaire d'événements
GEvent.addListener (marker, "click", function(marker)
{
  marker.openInfoWindowHtml (nomArret + ' (' + codArret + ')');
});

A+

[jmnicolas]

Ca ne marche pas non plus, cette fois ci mes marqueurs ne réagissent même plus au clic.

IE me donne comme erreur "Cet objet ne gère pas cette propriété ou cette méthode".

Le pire c'est que j'ai repris le code donné sur les tutos Google

[Invité]

Re,

Tu dois passer par une fonction pour créer ton marqueur (sinon tu l'écrase avec le suivant)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
}
 
var marker = createMarker(point,nomArret + ' (' + codArret + ')')
map.addOverlay(marker);

Voir ICI

A+

[jmnicolas]

Ah oui effectivement ça marche comme ça !

Je comprend toutefois pas bien pourquoi devoir déporter la création du marqueur en dehors de la boucle ... mais bon ça fait sans doute partie des mystères de JavaScript !

En tout cas, merci à toi !

Je joint le code qui fonctionne des fois que ça puisse servir à quelqu'un d'autre :

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
29
30
31
32
33
34
35
 // méthode de création de marqueurs
                function createMarker(pt, cod, info)
                {
                    var marker = new GMarker(pt);
                    marker.value = cod ;
 
                    // on ajoute au gestionnaire d'événements
                    GEvent.addListener (marker, "click", function()
                    {
                        marker.openInfoWindowHtml (info);
                    });
                    return marker;
                }
 
 
                // pour chaque élément du tableau on crée un marqueur
                for (var i = 0; i < arrets.length; i++)
                 {
                    // on récupère les infos de chaque arrêt
                    var codArret = arrets[i].getAttribute("cod");
                    var nomArret = arrets[i].getAttribute("nom");
                    var lat = parseFloat(arrets[i].getAttribute("lat"));
                    var lon = parseFloat(arrets[i].getAttribute("lon"));
 
 
                    // on définit les coordonnées du marqueur
                    var point = new GLatLng(lat, lon);
 
                    // on crée le marqueur
                    var ifo =  nomArret + ' (' + codArret + ')' ;
                    var marker = createMarker(point, codArret, ifo)
 
                    // on place le marqueur sur la carte
                    map.addOverlay(marker);
                }

[Invité]

Bonjour,

Tu ne déportes pas la création des marqueurs !
Simplement, tu crées un nouvel objet qui n'écrase pas les autres.

a+