Toujours le meme infowindow

**Juli3ns** · 08/05/2010, 01h56

Bonjour à tous,

J'essaye de placer plusieurs points sur une carte avec pour chaque point un titre contenu dans un infowindow.

Les points sont contenus dans un tableau javascript address et les titres dans un autre tableau appelé nom.

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
36
37
38
var geocoder;
var map;
 
function initialize(address, nom) {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(46.9,1.56);
	var myOptions = {
		zoom: 6,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 
 for (i=0; i<address.length; i++) {
  if (geocoder) {
   var contentString = '<div id="content"><h2>'+nom[i]+'</h2></div>';
   var infowindow = new google.maps.InfoWindow({
    content: contentString
   });
 
   geocoder.geocode( { 'address': address[i]}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
     var marker = new google.maps.Marker({
      map: map, 
      position: results[0].geometry.location
     });
 
     google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
     });
    } else {
     alert("Geocode was not successful for the following reason: " + status);
    }
   });
  }
 }
}

Mes tableaux sont définis de la façon suivante :

Code :

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

1
2
var listeNoms = new Array("Titre 1", "Titre 2");
var listeAdresses = new Array("adresse1", "adresse2");

Et enfin, ma fonction est appelée sur la propriété onload de body:

Code :

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

<body onload="initialize(listeAdresses, listeNoms);">

Lors de l'affichage de la page, les points sont bien placés mais les infoswindows contiennent les mêmes titres, à savoir le dernier nom contenu dans mon tableau nom. Si je place un alert lors de la définition de l'infowindow, j'ai bien un titre différent à chaque passage de boucle.

J'avoue ne pas comprendre

Avez-vous une explication ?

Merci

**emmanuel.remy** · 20/05/2010, 09h35

Salut,

C'est un problème de contexte des variables.
Ton souci vient de cette partie de ton code:

Code :

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

1
2
3
4
5
6
7
8
9
 
for(....) {
    var infoWindow= ...
    ...
    google.maps.event.addListener(marker, 'click', function() {
         infowindow.open(map,marker);
        });
 
}

Quand tu passes ta function à addListener, JS introduit une référence à infoWindow pour l'appel du open.
Or infoWindow est une seule et même variable (ce n'est pas le var infoWindows ... qui change quelque chose. Donc finalement tes fonctions passées à addListener référencent toutes la même variable, dont le contenu est la dernière instance de InfoWindow créée au cours du dernier tour de boucle. D'où ton affichage.

Voilà tu n'as plus qu'à corriger !

ERE

**Juli3ns** · 24/05/2010, 22h30

Bonjour,

Merci pour ta réponse, ce weekend ayant été très chargé en travail, je viens de lire ton message à l'instant.

J'ai contourné mon problème en utilisant la propriété "info" comme me l'a suggéré un ami.

Code :

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

1
2
3
4
5
6
7
8
9
10
markers[i] = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: ''+i
});
 
new google.maps.event.addListener(markers[i], 'click', function() {
      var index = parseInt( (this).getTitle(),10 );
      infowindows[index].open(map,this); 
});

Maintenant l'application fonctionne bien mais bien sur la propriété title perd tout son intérêt. C'est pourquoi j'aimerais utiliser ta solution.

Meme si pour l'instant j'avoue ne pas comprendre ou devoir déclarer ma variable pour produire l'affichage désiré, je vais m'y pencher d'ici peu.

Un grand merci pour ta réponse. Je mettrais le topic en Résolu lors de mon retour ici

**bizhon** · 11/08/2010, 17h56

Envoyé par emmanuel.remy

Salut,

C'est un problème de contexte des variables.
Ton souci vient de cette partie de ton code:

Code :

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

1
2
3
4
5
6
7
8
9
 
for(....) {
    var infoWindow= ...
    ...
    google.maps.event.addListener(marker, 'click', function() {
         infowindow.open(map,marker);
        });
 
}

Quand tu passes ta function à addListener, JS introduit une référence à infoWindow pour l'appel du open.
Or infoWindow est une seule et même variable (ce n'est pas le var infoWindows ... qui change quelque chose. Donc finalement tes fonctions passées à addListener référencent toutes la même variable, dont le contenu est la dernière instance de InfoWindow créée au cours du dernier tour de boucle. D'où ton affichage.

Voilà tu n'as plus qu'à corriger !

ERE

Hum ok mais tu aurais fait comment alors pour eviter cette erreur :/ !
Dsl mais moi je ne vois pas du tout

Merci d'avance