Discussion :

[pgtsdvl]

Bonjour à tous,

Je ne suis pas très familier avec Javascript. J'essaye néanmoins de me débrouiller, et je suis actuellement en train de passer le code de mon site RC-SlopeS de la V2 à la V3 de l'API Google Maps.

D'avance désolé si ce post devrait être dans une autre rubrique, signalez le moi (ainsi qu'aux modérateurs) pour qu'on puisse faire ce qu'il faut...

La difficulté que je rencontre est la suivante : j'ai 2 boucles qui génèrent des marqueurs sur une carte. Les "pentes" les "parkings".
Tous ces marqueurs ont des infos bulles. Dans le cas des pentes, j'obtiens bien avec mon code les infos bulles propre à chaque marqueurs, mais tous mes marqueurs parking reçoivent par contre la même info bulle (celle du dernier marqueur "parking").

Je soupçonne une bête erreur d'indice de boucle quelque part, mais je ne la trouve pas...

Merci à vous si vous avez le temps de jeter un oeil et me dire ce que vous en pensez !

La page est visible ici : http://www.rc-slopes.com/indexV3.php?map=true
Les pentes (marqueurs qui fonctionnent comme je veux avec infos bulles respectives) sont les 2 roses des vents.
Les parkings (infos bulles qui fonctionnent pas, 2 fois la même alors qu'elles devraient être différentes) apparaissent en cochant la case "parkings" en haut à gauche de la carte.
La page qui fonctionne comme je veux avec l'api V2 est ici : http://www.rc-slopes.com/index.php?map=true

Voici mon .js :

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
// variables générales
var map;
var dfa;
var dfo;
var dfz;
 
 
// variables pour les markers des pentes
var locations = [
/* pente 001 Pech David Haut */
['<div style="background-color:white; width:502px;"><table width="500" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="3"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/001-t.png" alt="en t&ecirc;te de la pente Pech-David &apos;En Bas&apos;" height="60" width="500"/></td></tr><tr><th rowspan="2" height="180" width="180"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/001-l.png" alt="l&eacute;gende de la pente Pech-David &apos;En Bas&apos;" height="180" width="180"/></th><td height="137" width="100" valign="center" style="padding: 10;"><p class="info-windows"><center>                  <a href="http://www.modelisme.com/forum/aero-planeurs/17522-le-coin-des-planeuristes-toulousains.html"target="_blank" title="http://www.modelisme.com/forum/aero-planeurs/17522-le-coin-des-planeuristes-toulousains.html"><font color="#1fd9ca">modelisme</font></a><br>                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><a href="http://www.rc-slopes.com/album-photo.php?pe=1" title="Album photo de cette pente"  onMouseOver="document.img_1.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/pix-on.png&apos;;" onMouseOut="document.img_1.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/pix.png&apos;;" ><img name="img_1" src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/pix.png" height="32" width="32"></a>&nbsp;<a href="http://www.rc-slopes.com/album-video.php?pe=1" title="Album vid&eacute;o de cette pente" onMouseOver="document.img_2.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/vid-on.jpg&apos;;" onMouseOut="document.img_2.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/vid.png&apos;;"><img name="img_2" src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/vid.png" height="32" width="32"></a>&nbsp;<a href="http://www.rc-slopes.com/album-note.php?pe=1" title="Notes r&eacute;dig&eacute;es sur cette pente" onMouseOver="document.img_3.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/not-on.jpg&apos;;" onMouseOut="document.img_3.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/not.png&apos;;"><img name="img_3" src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/not.png"/></a></center></p></td><td height="137" width="220"><p class="info-windows">Le spot du planeuriste toulousain : presque en centre ville !</p></td></tr><tr><td colspan="2"></td></tr><tr><td colspan="3" height="100" width="500" valign="bottom" style="background-image: url(http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/silhouette-pente-bleue.png);"><p><b>Moyenne pente, herbe - vdp: NW WNW W - parking &agrave; proximit&eacute; imm&eacute;diate - accessible toute l&apos;ann&eacute;e</b></p></td></tr><tr><td colspan="3"><p><font color="#ffa010"><b>Cette pente est un espace public o&ugrave; notre activit&eacute; est tol&eacute;r&eacute;e par les autorit&eacute;s. Il est important de s&apos;y montrer citoyen, raisonnable et d&apos;&ecirc;tre tr&egrave;s vigilant sur la s&eacute;curit&eacute;.</b></font></p></td></tr><tr><td><a href="http://www.rc-slopes.com/index.php?dfa=43.556795&dfo=1.444892&dfz=15" title="zoom direct sur cette pente" onMouseOver="document.img_7.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/url-on.jpg&apos;;" onMouseOut="document.img_7.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/url.png&apos;;"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/url.png" name="img_7" title="Lien direct vers cette pente" alt="url" height="32" width="32"/></a><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/separator.png"/><a href="http://www.rc-slopes.com/windfinder.php?nob=fr55&pe=1" onMouseOver="document.img_8.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/M-on.jpg&apos;;" onMouseOut="document.img_8.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/M.png&apos;;"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/M.png" name="img_8" title="M&eacute;t&eacute;o Windfinder &agrave; 10.1 kms de cette pente" alt="M" height="32" width="32"/></a><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/separator.png"/><a href="http://www.rc-slopes.com/proposer_pente.php?pe=1" onMouseOver="document.img_9.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/Up-on.jpg&apos;;" onMouseOut="document.img_9.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/Up.png&apos;;"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/Up.png"  name="img_9" title="Proposer des mises &agrave; jour sur cette pente" alt="Up" height="32" width="32"/></a><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/separator.png"/><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/T-blanc.png" alt="T" height="32" width="32"/><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/separator.png"/><a href="http://www.rc-slopes.com/signaler-pente-propriete-privee.php?pe=1&penteNom=Pech-David &apos;En Bas&apos;&penteCoord=43.556795,1.444892" onMouseOver="document.img_11.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/PP-on.jpg&apos;;" onMouseOut="document.img_11.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/PP.png&apos;;"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/PP.png" name="img_11" title="Signaler une propri&eacute;t&eacute; priv&eacute;e" alt="PP" height="32" width="32"/></a></td><td colspan="2"><p class="info-windows"><center>Propos&eacute;e par <b><a href="http://www.rc-slopes.com/profil.php?psd=pgts" title="Consulter la fiche profil de pgts">pgts</a></b> le 25/06/2011</center></p></td></tr></table></div>',
43.556795, 1.444892, '001'],
/* pente 004 Montvalent */
['<div style="background-color:white; width:502px;"><table width="500" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="3"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/004-t.png" alt="en t&ecirc;te de la pente Cirque De Montvalent" height="60" width="500"/></td></tr><tr><th rowspan="2" height="180" width="180"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/004-l.png" alt="l&eacute;gende de la pente Cirque De Montvalent" height="180" width="180"/></th><td height="137" width="100" valign="center" style="padding: 10;"><p class="info-windows"><center>                  <a href="http://laurent.tereyjol.free.fr/pente_monvalent_01-09/index.html"target="_blank" title="http://laurent.tereyjol.free.fr/pente_monvalent_01-09/index.html"><font color="#1fd9ca">laurent</font></a><br>                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><a href="http://www.rc-slopes.com/album-photo.php?pe=4" title="Album photo de cette pente"  onMouseOver="document.img_1.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/pix-on.png&apos;;" onMouseOut="document.img_1.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/pix.png&apos;;" ><img name="img_1" src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/pix.png" height="32" width="32"></a>&nbsp;<a href="http://www.rc-slopes.com/album-video.php?pe=4" title="Album vid&eacute;o de cette pente" onMouseOver="document.img_2.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/vid-on.jpg&apos;;" onMouseOut="document.img_2.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/vid.png&apos;;"><img name="img_2" src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/vid.png" height="32" width="32"></a>&nbsp;<a href="http://www.rc-slopes.com/album-note.php?pe=4" title="Notes r&eacute;dig&eacute;es pour cette pente" onMouseOver="document.img_3.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/not-on.jpg&apos;;" onMouseOut="document.img_3.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/not.png&apos;;"><img name="img_3" src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/not.png"/></a></center></p></td><td height="137" width="220"><p class="info-windows">Excellente dynamique par faible vent du nord. Les parapentes ont une zone de d&eacute;part plus &agrave; droite, mais elle n&apos;est pas pratique pour poser. Grands pr&eacute;s pour atterro ici, mais cr&ecirc;te de vol avec arbres&hellip;</p></td></tr><tr><td colspan="2"></td></tr><tr><td colspan="3" height="100" width="500" valign="bottom" style="background-image: url(http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/silhouette-pente-bleue.png);"><p><b>Moyenne pente, herbe et cailloux - vdp: N NNW NW NE NNE - moins d&apos;une demi-heure de marche - accessible toute l&apos;ann&eacute;e - autres types de vol libre sur le site</b></p></td></tr><tr><td colspan="3"><p><font color="#c51313"><b>Cet endroit est une propri&eacute;t&eacute; priv&eacute;e. Il est de rigueur de demander au propri&eacute;taire une autorisation avant d&apos;y voler.</b></font></p></td></tr><tr><td><a href="http://www.rc-slopes.com/index.php?dfa=44.895573&dfo=1.647091&dfz=15" title="zoom direct sur cette pente" onMouseOver="document.img_7.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/url-on.jpg&apos;;" onMouseOut="document.img_7.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/url.png&apos;;"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/url.png" name="img_7" title="Lien direct vers cette pente" alt="url" height="32" width="32"/></a><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/separator.png"/><a href="http://www.rc-slopes.com/windfinder.php?nob=fr1001&pe=4" onMouseOver="document.img_8.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/M-on.jpg&apos;;" onMouseOut="document.img_8.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/M.png&apos;;"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/M.png" name="img_8" title="M&eacute;t&eacute;o Windfinder &agrave; 5.5 kms de cette pente" alt="M" height="32" width="32"/></a><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/separator.png"/><a href="http://www.rc-slopes.com/proposer_pente.php?pe=4" onMouseOver="document.img_9.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/Up-on.jpg&apos;;" onMouseOut="document.img_9.src=&apos;http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/Up.png&apos;;"><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/Up.png"  name="img_9" title="Proposer des mises &agrave; jour sur cette pente" alt="Up" height="32" width="32"/></a><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/separator.png"/><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/T-blanc.png" alt="T" height="32" width="32"/><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/separator.png"/><img src="http://www.rc-slopes.com/00-rcs-the-map/pentes-infos-mini/multi-pentes/PP-blanc.png" alt="PP" height="32" width="32"/></td><td colspan="2"><p class="info-windows"><center>Propos&eacute;e par <b><a href="http://www.rc-slopes.com/profil.php?psd=pgts" title="Consulter la fiche profil de pgts">pgts</a></b> le 25/06/2011<br>Modifi&eacute;e par <b><a href="http://www.rc-slopes.com/profil.php?psd=Loulou84" title="Consulter la fiche profil de Loulou84">Loulou84</a></b> le 16/07/2013</center></p></td></tr></table></div>',
44.895573,1.647091 , '004']
];
var infowindow = new google.maps.InfoWindow();
var markerPe, i;
 
 
 
function initialize() {
 
	// ------------------ préparation affichage de la carte
	var mapOptions = {
	  zoom: 3,
	  mapTypeId: google.maps.MapTypeId.TERRAIN
	};
	map = new google.maps.Map(document.getElementById("map-canvas"),
		mapOptions);
 
	if (navigator.geolocation){
		// ---------------------- utilisation du module de geolocalisation	
		navigator.geolocation.getCurrentPosition(function(position){
			// ------------------ lecture de la position du visiteur
			dfa = position.coords.latitude;
			dfo = position.coords.longitude;
			dfz = 8;
 
			// ------------------ s'il y a des paramètres d'affichage de la carte
			if((location.search != "") && (location.search.indexOf('dfa')!="-1")){
			params = location.search;
			dfa = params.substring(params.indexOf('dfa')+4, params.indexOf('&dfo'));
			dfo = params.substring(params.indexOf('dfo')+4, params.indexOf('&dfz'));
			dfz = parseInt(params.substring(params.indexOf('dfz')+4));}
 
			// ------------------ prise en compte du centrage de la carte et du zoom
			map.setCenter(new google.maps.LatLng(dfa, dfo));
			map.setZoom(11);
 
			// ------------------ affichage de la position du visiteur
			var image = new google.maps.MarkerImage('images/position.png',
					new google.maps.Size(20, 20),
					new google.maps.Point(0,0),
					new google.maps.Point(10, 10));
			var marker = new google.maps.Marker({
			position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
			map: map,
			icon: image
			});
 
			// ------------------ boucle affichage slopes
			for (i = 0; i < locations.length; i++) {
				markerPe = new google.maps.Marker({position: new google.maps.LatLng(locations[i][1], locations[i][2]),map: map, icon: '00-rcs-the-map/pentes-infos-mini/' + locations[i][3] + '-i.png'});
				google.maps.event.addListener(markerPe, 'click', (function(markerPe, i) {return function() {
					infowindow.setContent(locations[i][0]);
					infowindow.open(map, markerPe);}
				})(markerPe, i));
			}
 
		}, function() {
			handleNoGeolocation(true);
		});
	}
	else {
		handleNoGeolocation(false);
	}
}
 
function handleNoGeolocation(errorFlag) {
	if (errorFlag) {
    var content = 'The Geolocation service failed.';
	} else {
    var content = 'Your browser doesn\'t support geolocation.';
	}
 
	var options = {
    map: map,
    position: new google.maps.LatLng(43, 0)/*,
    content: content*/
	};
 
	//var infowindow = new google.maps.InfoWindow(options);
	alert(content);
	map.setCenter(options.position);
 
	// ------------------ boucle affichage slopes
	for (i = 0; i < locations.length; i++) {
		markerPe = new google.maps.Marker({position: new google.maps.LatLng(locations[i][1], locations[i][2]),map: map, icon: '00-rcs-the-map/pentes-infos-mini/' + locations[i][3] + '-i.png'});
		google.maps.event.addListener(markerPe, 'click', (function(markerPe, i) {return function() {
			infowindow.setContent(locations[i][0]);
			infowindow.open(map, markerPe);}
		})(markerPe, i));
	}
}
 
 
/*-------------------------------------------------------- FONCTION CALQUES SELECTIONNES ---------------------------------------------------------------- */
var pointP;
var iconP;
var textP;
var pmarker, j;
var pinfowindow = new google.maps.InfoWindow();
var allParkingMarkers = [];
var pointW;
var iconW;
var textW;
var wmarker, k;
var allWindfinderMarkers = [];
var winfowindow = new google.maps.InfoWindow();
 
var plocations = [
/* parking 001*/
['Pech David',
43.558058, 1.44806],
/* parking 004 */
['Montvalent',
44.891611, 1.644868],
];
 
function toggleMaps(t) {
	var reg=new RegExp("[|]", "g");
	tt = t.value.split(reg);
 
	if(t.checked) {
 
		if (tt[1]=='parkings') {//BOUCLE DES MARQUEURS PARKINGS
				for (j = 0; j < plocations.length; j++) {
					pointP = new google.maps.LatLng(plocations[j][1],plocations[j][2]);
					iconP = '00-rcs-the-map/pentes-infos-mini/multi-pentes/ico-rcs-parkings.png';
					textP = '<center><b>' + plocations[j][0] + '</b></center>';
					pmarker = new google.maps.Marker({position: pointP, map: map, icon: iconP});
					google.maps.event.addListener(pmarker, 'click', (function(pmarker, j) {return function() { //infobulle
						pinfowindow.setContent(textP);
						pinfowindow.open(map, pmarker);}
					})(pmarker, j));
				}
			// });
		} else if (tt[1]=='windfinder'){ //BOUCLE DES MARQUEURS WINDFINDER
 
		}
	} else {
 
		if (tt[1]=='parkings') {
			for (j = 0; j < 2 * (allParkingMarkers.length); j++) {
				allParkingMarkers[j].setMap(null);
            }
		}
	}
}
 
google.maps.event.addDomListener(window, 'load', initialize);