Google maps : events dans boucle for

**philou8** · 12/09/2011, 21h23

Bonjour,
Je créé des polygones cliquables sur une carte.
J'essaie de créé un évènement dans une boucle "for" pour chaque zone cliquable, le tout dans la fonction load().
Je ne vois pas le problème, qui doit néanmoins sauter aux yeux.
Dans cet exemple simplifié, deux zones sont créées, lorsque je clique sur l'une d'entre elle, je dois voir son nom dans une boite de dialogue; j'affiche en fait la valeur "undefined".
Merci de m'aider
Trachy
voici le lien à la page :
www.paysagesdefrance.com/essai.htm
Voici le script :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Application Paysages de France</title>
<style type="text/css">
	#map{
	position:absolute;top:10px;left:10px;width:1000px; height: 750px
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript" src="../libraryV3/markermanager_packed.js" type="text/JavaScript"></script>
 
<script type="text/javascript">
// initialisation avec centre de la carte et zoom initial
var latcentrecarto = 46.54;
var longcentrecarto = 2.416;
var zoominitialcarto = 6;
 
// initialisation des demi largeur/hauteur des zones touristiques
 
var demihauteurzonetouristique = 0.116;
var demilargeurzonetouristique = 0.347;
 
 
// initialisation des zones touristiques avec le nom et la lattitude, longitude du centre de la zone
var nomzone=[];
var latcentrezone =[];
var longcentrezone =[];
 
// Bassin d'Arcachon
nomzone[0]= "Bassin d Arcachon";
latcentrezone[0]= 44.6897998686099;
longcentrezone[0]= -1.1421918869018554;
// Côte Basque
nomzone[1]= "Côte Basque";
latcentrezone[1]= 43.415678458962645;
longcentrezone[1]= -1.5047407150268554;
 
 
function load() {
 
	//construction de la carte
 
	var mymap;
 
	var centreCarte = new google.maps.LatLng(latcentrecarto, longcentrecarto);
     	var optionsCarte = {
          zoom: zoominitialcarto,
          center: centreCarte,
          mapTypeId: google.maps.MapTypeId.SATELLITE
	  };
     	  mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);
 
        //construction des polygones réactifs correspondant aux Zones touristiques
	var myzone =[];
	var tableaupointspolygone =[];
 
 for(i=0;i<latcentrezone.length;i++){
	tableaupointspolygone[i]= [
          new google.maps.LatLng(latcentrezone[i]-demihauteurzonetouristique,longcentrezone[i]   +demilargeurzonetouristique),
          new google.maps.LatLng(latcentrezone[i]-demihauteurzonetouristique,longcentrezone[i]-demilargeurzonetouristique),
          new google.maps.LatLng(latcentrezone[i]+demihauteurzonetouristique,longcentrezone[i]-demilargeurzonetouristique),
          new google.maps.LatLng(latcentrezone[i]+demihauteurzonetouristique,longcentrezone[i]+demilargeurzonetouristique)];
 
 var optionsZone = {
          clickable: true,
          fillColor: "#00AAFF",
	  fillOpacity: 0.5,
	  map: mymap,
          paths: tableaupointspolygone[i],
          strokeColor:"#FFAA00",
	  strokeOpacity: 1,
	  strokeWeight:1,
	  zIndex:5
	  };
       myzone[i]= new google.maps.Polygon(optionsZone);
 
	//Evènement : affichage du nom de la zone touristique au clic de la souris dans celle-ci
	google.maps.event.addListener (myzone[i],"click", function() {
	alert(nomzone[i]);
	});
 }
return;}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>

**NoSmoking** · 12/09/2011, 22h24

Bonsoir,
il s'agit d'un grand classique !

Code :

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

1
2
3
4
google.maps.event.addListener (myzone[i],"click", function() {
  //  alert(nomzone[i]);
  alert( this +'\nle i vaut :' +i ); // utilisation de l'objet sur lequel est place l'evenement
});

au moment de l'exécution de événement le i vaut 2, dans ton cas, et nomzone[2] est effectivement indéfini

**philou8** · 14/09/2011, 10h41

Bonjour,
J'ai trouvé la solution, la nuit porte conseil.
Je te remercie de m'avoir fait comprendre le problème.
Voici ce que j'ai écrit :

Code :

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

1
2
3
4
5
6
7
8
// Génération des évènements
        //Evènement : affichage du nom de la zone touristique au survol de la souris dans celle-ci
	for(i=0;i<latcentrezone.length;i++){ 
	google.maps.event.addListener (myzone[i],"mouseover", function() {
	for(k=0;k<latcentrezone.length;k++){
	if(this==myzone[k]){alert(nomzone[k]);}
	}
	});}

Si tu as une idée pour faire simplement un "rollover text" sur un polygone, je suis preneur.
Trachy

**NoSmoking** · 14/09/2011, 22h50

parmi les solutions possibles celle ci en est une à laquelle je n'avais pas pensé, mais il faut avouer qu'elle n'est quand même pas "très propre"!

Concernant ton problème, on est dans le même cas de figure que celui décrit dans cette FAQ, http://javascript.developpez.com/faq...lick.dynamique, c'est pourquoi je parlais d'un grand classique, il a pour nom closure ou fermeture en français dans le texte.

méthode #0
La méthode qui ne fonctionne pas est reprise dans l'exemple ci dessous, aménagé pour que le script ne plante pas.

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Google Maps API V3] Placer plusieurs Markers #0</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
* {
  font-family : Verdana, Arial;
  font-size : 1em;
}
html, body {
  height : 100%;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  margin : 0;
  padding : 0.5em;
  border : 1px solid #4488bb;
}
p {
  font-size : 0.9em;
  line-height : 1.5em;
  margin : 5px;
  margin-left : 1.0em;
  padding : 0;
}
#page {
  padding : 0.5em;
}
#div_main {
  margin : auto;
  width : 800px;
}
#div_map{
  margin : auto;
  margin-top : 1.0em;
  width : 600px;
  height: 600px;
  border : 1px solid #c0c0c0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tMarker = [
  { lat :45.767299, lon : 4.834329,
    title : 'Lyon', info : '<b>Lyon<\/b><br>la suite du texte...'
  },
  {
    lat : 48.856667, lon :  2.350987,
    title : 'Paris', info : '<b>Paris<\/b><br>la suite du texte...'
  },
  { lat : 44.837368, lon : -0.576144,
    title : 'Bordeaux', info : '<b>Bordeaux<\/b><br>la suite du texte...'
  },
  { lat :43.297612, lon : 5.381042,
   title : 'Marseille', info : '<b onclick="alert(\'yes!\')">Marseille<\/b><br>la suite du texte...'
  }
];
 
function initCarte(){
  // init
  var oCarte, oMarker, oInfo;
  var i, nb = tMarker.length;
  var mapOptions = {
    backgroundColor : '#fff',
    mapTypeControl :  false,
    streetViewControl : false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    zoom : 6,
    center : new google.maps.LatLng( 45.70, 3.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // creation de la carte
  oCarte = new google.maps.Map(document.getElementById("div_map"), mapOptions);
  // creation info bulle
  oInfo = new google.maps.InfoWindow();
  // creation des marqueurs
  for( i = 0; i < nb; i++){
    // creation markeur
    oMarker = new google.maps.Marker({
      position : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      map : oCarte,
      title : tMarker[i].title
    });
    // creation info bulle
    oInfo = new google.maps.InfoWindow({
      content: tMarker[i].info
    });
    // evenement sur click marker
    google.maps.event.addListener( oMarker, 'click', function() {
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
    });
  }
}
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="div_main">
    <h1>[Google Maps API V3] Placer plusieurs Markers #0</h1>
    <p>
      Cette m&eacute;thode <b>ne fonctionne pas</b>!<br>C'est toujours le m&ecirc;me texte qui est affich&eacute;, le dernier initialis&eacute;.
    </p>
    <div id="div_map"></div>
  </div>
</div>
</body>
</html>

les exemples suivants montrent plusieurs façons d'arriver à nos fins.

méthode #1
avec affectation d'une propriété au marker, dans laquelle on met les données à afficher

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Google Maps API V3] Placer plusieurs Markers #1</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
* {
  font-family : Verdana, Arial;
  font-size : 1em;
}
html, body {
  height : 100%;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  margin : 0;
  padding : 0.5em;
  border : 1px solid #4488bb;
}
p {
  font-size : 0.9em;
  line-height : 1.5em;
  margin : 5px;
  margin-left : 1.0em;
  padding : 0;
}
#page {
  padding : 0.5em;
}
#div_main {
  margin : auto;
  width : 800px;
}
#div_map{
  margin : auto;
  margin-top : 1.0em;
  width : 600px;
  height: 600px;
  border : 1px solid #c0c0c0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tMarker = [
  { lat :45.767299, lon : 4.834329,
    title : 'Lyon', info : '<b>Lyon<\/b><br>la suite du texte...'
  },
  {
    lat : 48.856667, lon :  2.350987,
    title : 'Paris', info : '<b>Paris<\/b><br>la suite du texte...'
  },
  { lat : 44.837368, lon : -0.576144,
    title : 'Bordeaux', info : '<b>Bordeaux<\/b><br>la suite du texte...'
  },
  { lat :43.297612, lon : 5.381042,
   title : 'Marseille', info : '<b onclick="alert(\'yes!\')">Marseille<\/b><br>la suite du texte...'
  }
];
 
function initCarte(){
  // init
  var oCarte, oMarker, oInfo;
  var i, nb = tMarker.length;
  var mapOptions = {
    backgroundColor : '#fff',
    mapTypeControl :  false,
    streetViewControl : false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    zoom : 6,
    center : new google.maps.LatLng( 45.70, 3.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // creation de la carte
  oCarte = new google.maps.Map(document.getElementById("div_map"), mapOptions);
  // creation info bulle
  oInfo = new google.maps.InfoWindow();
  // creation des marqueurs
  for( i = 0; i < nb; i++){
    oMarker = new google.maps.Marker({
      position : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      map : oCarte,
      title : tMarker[i].title
    });
    // ajout propriete info au marker
    oMarker.info = tMarker[i].info;
    // evenement sur click marker
    google.maps.event.addListener( oMarker, 'click', function() {
      // affectation du texte
      oInfo.setContent( this.info);
      // affichage InfoWindow
      oInfo.open( this.getMap(), this);
    });
  }
}
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="div_main">
    <h1>[Google Maps API V3] Placer plusieurs Markers #1</h1>
    <p>
      Le texte est contenu dans une propri&eacute;t&eacute; ajout&eacute;e au marker, <i>oMarker.info</i>.<br>
      On affecte le texte &agrave; l'InfoWindow avant affichage.
    </p>
    <div id="div_map"></div>
  </div>
</div>
</body>
</html>

méthode #2
on initialise l'événement en utilisant une fonction externe en passant les données en paramètres

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Google Maps API V3] Placer plusieurs Markers #2</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
* {
  font-family : Verdana, Arial;
  font-size : 1em;
}
html, body {
  height : 100%;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  margin : 0;
  padding : 0.5em;
  border : 1px solid #4488bb;
}
p {
  font-size : 0.9em;
  line-height : 1.5em;
  margin : 5px;
  margin-left : 1.0em;
  padding : 0;
}
#page {
  padding : 0.5em;
}
#div_main {
  margin : auto;
  width : 800px;
}
#div_map{
  margin : auto;
  margin-top : 1.0em;
  width : 600px;
  height: 600px;
  border : 1px solid #c0c0c0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tMarker = [
  { lat :45.767299, lon : 4.834329,
    title : 'Lyon', info : '<b>Lyon<\/b><br>la suite du texte...'
  },
  {
    lat : 48.856667, lon :  2.350987,
    title : 'Paris', info : '<b>Paris<\/b><br>la suite du texte...'
  },
  { lat : 44.837368, lon : -0.576144,
    title : 'Bordeaux', info : '<b>Bordeaux<\/b><br>la suite du texte...'
  },
  { lat :43.297612, lon : 5.381042,
   title : 'Marseille', info : '<b onclick="alert(\'yes!\')">Marseille<\/b><br>la suite du texte...'
  }
];
 
function initCarte(){
  // init
  var oCarte, oMarker, oInfo;
  var i, nb = tMarker.length;
  var mapOptions = {
    backgroundColor : '#fff',
    mapTypeControl :  false,
    streetViewControl : false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    zoom : 6,
    center : new google.maps.LatLng( 45.70, 3.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // creation de la carte
  oCarte = new google.maps.Map(document.getElementById("div_map"), mapOptions);
  // creation info bulle
  oInfo = new google.maps.InfoWindow();
  // creation des marqueurs
  for( i = 0; i < nb; i++){
    oMarker = new google.maps.Marker({
      position : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      map : oCarte,
      title : tMarker[i].title
    });
    // evenement sur click marker via fonction externe
    setEventMarker( oMarker, oInfo, tMarker[i].info);
  }
}
function setEventMarker( marker, infowindow, texte){
  google.maps.event.addListener( marker, 'click', function() {
    // affectation du texte
    infowindow.setContent( texte);
    // affichage InfoWindow
    infowindow.open( this.getMap(), this);
  });
}
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="div_main">
    <h1>[Google Maps API V3] Placer plusieurs Markers #2</h1>
    <p>
      Le texte est pass&eacute; en param&egrave;tre &agrave; une fonction externe.<br>
      On affecte le texte &agrave; l'InfoWindow avant affichage.
    </p>
    <div id="div_map"></div>
  </div>
</div>
</body>
</html>

méthode #3
on passe en paramètres les données à une fonction anonyme, ce qui permet de na pas polluer l'espace de 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Google Maps API V3] Placer plusieurs Markers #3</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
* {
  font-family : Verdana, Arial;
  font-size : 1em;
}
html, body {
  height : 100%;
}
h1 {
  color : #4488bb;
  font-size : 1.3em;
  margin : 0;
  padding : 0.5em;
  border : 1px solid #4488bb;
}
p {
  font-size : 0.9em;
  line-height : 1.5em;
  margin : 5px;
  margin-left : 1.0em;
  padding : 0;
}
#page {
  padding : 0.5em;
}
#div_main {
  margin : auto;
  width : 800px;
}
#div_map{
  margin : auto;
  margin-top : 1.0em;
  width : 600px;
  height: 600px;
  border : 1px solid #c0c0c0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var tMarker = [
  { lat :45.767299, lon : 4.834329,
    title : 'Lyon', info : '<b>Lyon<\/b><br>la suite du texte...'
  },
  {
    lat : 48.856667, lon :  2.350987,
    title : 'Paris', info : '<b>Paris<\/b><br>la suite du texte...'
  },
  { lat : 44.837368, lon : -0.576144,
    title : 'Bordeaux', info : '<b>Bordeaux<\/b><br>la suite du texte...'
  },
  { lat :43.297612, lon : 5.381042,
   title : 'Marseille', info : '<b onclick="alert(\'yes!\')">Marseille<\/b><br>la suite du texte...'
  }
];
 
function initCarte(){
  // init
  var oCarte, oMarker, oInfo;
  var i, nb = tMarker.length;
  var mapOptions = {
    backgroundColor : '#fff',
    mapTypeControl :  false,
    streetViewControl : false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    zoom : 6,
    center : new google.maps.LatLng( 45.70, 3.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // creation de la carte
  oCarte = new google.maps.Map(document.getElementById("div_map"), mapOptions);
  // creation info bulle
  oInfo = new google.maps.InfoWindow();
  // creation des marqueurs
  for( i = 0; i < nb; i++){
    oMarker = new google.maps.Marker({
      position : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
      map : oCarte,
      title : tMarker[i].title
    });
    // evenement sur click marker passage par fonction anonyme
    (function( texte){
      google.maps.event.addListener( oMarker, 'click', function() {
        // affectation du texte passe en parametre
        oInfo.setContent( texte);
        // affichage InfoWindow
        oInfo.open( this.getMap(), this);
      });
    })(tMarker[i].info);
  }
}
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="div_main">
    <h1>[Google Maps API V3] Placer plusieurs Markers #3</h1>
    <p>
      Le texte est pass&eacute; en param&egrave;tre via une fonction anonyme.<br>
      On affecte le texte &agrave; l'InfoWindow avant affichage.
    </p>
    <div id="div_map"></div>
  </div>
</div>
</body>
</html>

les 4 exemples sont réalisés sur la même base et devrait mieux te montrer les différentes manières de régler ton problème.

Pour ton deuxième soucis il me semble préférable d'ouvrir un autre topic.

**philou8** · 04/10/2012, 16h16

Je te rappelle très tard pour te remercier, effectivement j'avais résolu mon problème de manière un peu "tirée par les cheveux", la méthode de la fonction anonyme est plus difficile à concevoir pour un néophyte, mais elle est beaucoup plus élégante.

Google maps : events dans boucle for [Google Maps]

APIs Google

Discussions similaires

Partager

Partager