Marker map title

**tagia** · 29/09/2014, 18h06

Bonjour,
Je génère une map de googlemaps avec la google api.
Jusque la tout va bien mais tout mes marker ont le même title...
le problème étant que je redirige onclick vers une url qui dépend directement de ce title (et donc qui ne fonctionne pas)
Merci de votre aide

Voici la fonction, elle prend en entrée un tableau de la forme suivante :

Code :

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

1
2
3
4
5
6
7
jsagences[x][y]=adresse
jsagences[x][y+1]=nom
jsagences[x][y+2]=taille
 
jsagences[x+1][y]=adresse
jsagences[x+1][y+1]=nom
jsagences[x+1][y+2]=taille

...

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
function codeAddress(jsagences) {
  for(var i=0;i<jsagences.length; i++)
  {
	  var jsagence = jsagences[i];
	  var marker = new Array();
	  geocoder.geocode( { 'address': jsagence[0]}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			  marker[i] = new google.maps.Marker({
			  map: map,
			  position: results[0].geometry.location,
			  title: jsagence[1],
			  icon: new google.maps.MarkerImage(
			  "marker.png",
			  null,
			  null,
			  null,
			  new google.maps.Size(50+jsagence[2]/2, 50+jsagence[2]/2)
			  )
		  });
		  google.maps.event.addListener(marker[i], 'click', function(){
																		var url="http://monurl/"+jsagence[1]+".htm";
																		window.open(encodeURI(url));
																	});
		} else {
		 // alert('Geocode was not successful for the following reason: ' + status);
			pausecomp(5000);
			i--;
		}
	  });
 
  }
}

**NoSmoking** · 30/09/2014, 18h54

Bonjour et bienvenue sur DVP.

Ce sujet a déjà été abordé, pour le principe, dans cette discussion Geocoder, Multiple Marker et infowindow [TypeError: a is undefined].

Bonne lecture

**tagia** · 01/10/2014, 10h48

Merci pour cette réponse, après lecture du post proposé je suppose que l'action qui doit resoudre mon problème est l'encapsulation de la fct geoceoder dans une fonction, seulement ca n'a rien changer...
J'ai aussi un probleme de nombre de requete a la seconde... que j'ai "resolu" par un doublon d'agence
Pour plus de precision je met l'ensemble de mon code afin que vous puissiez tester le resultat :

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
163
164
165
166
167
168
169
170
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Agences map</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var geocoder;
var map;
 
function pausecomp(millis) 
{
	var date = new Date();
	var curDate = null;
 
	do { curDate = new Date(); } 
	while(curDate-date < millis);
} 
 
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(47.05, 2.40);
  var mapOptions = {
    zoom: 6,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
 
function codeAddress(jsagences) {
  for(var i=0;i<jsagences.length; i++)
  {
	  var jsagence = jsagences[i];
	  var marker = new Array();
	  (function(jsagence){
	  geocoder.geocode( { 'address': jsagences[i][0]}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			  marker[i] = new google.maps.Marker({
			  map: map,
			  position: results[0].geometry.location,
			  title: jsagences[i][1],
			  icon: new google.maps.MarkerImage(
			  "marker.png",
			  null,
			  null,
			  null,
			  new google.maps.Size(50+jsagences[i][2]/2, 50+jsagences[i][2]/2)
			  )
		  });
		  google.maps.event.addListener(marker[i], 'click', function(){
														var url="http://monsite/"+jsagences[i][1]+".htm";
														window.open(encodeURI(url));
													});
		} else {
		 // alert('Geocode was not successful for the following reason: ' + status);
			pausecomp(5000);
			i--;
		}
	  });
	 })(jsagences[i]);
  }
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
<?php
  $agences[0][0]="agence 1";
  $agences[0][1]="505 avenue Galilée, Aix, France";
  $agences[0][2]=1;
  
  $agences[1][0]="agence 2";
  $agences[1][1]="24 rue gauvain, Angers, France";
  $agences[1][2]=1;
  
  $agences[2][0]="agence 3";
  $agences[2][1]="2 place Fulgence Bienvenue, Bussy, France";
  $agences[2][2]=1;
  
  $agences[3][0]="agence 4";
  $agences[3][1]="15 allée des acacias, Merignac, France";
  $agences[3][2]=1;
  
  $agences[4][0]="agence 5";
  $agences[4][1]="82 avenue de Thiès, Caen, France";
  $agences[4][2]=1;
  
  $agences[5][0]="agence 6";
  $agences[5][1]="32 rue Amadéo, Clermond-Ferrand, France";
  $agences[5][2]=1;
  
  $agences[6][0]="agence 7";
  $agences[6][1]="340 avenue de la marne, Marcq en Baroeul, France";
  $agences[6][2]=1;
  
  $agences[7][0]="agence 8";
  $agences[7][1]="1 rue du Colonel Chambonnet, Bron, France";
  $agences[7][2]=1;
  
  $agences[8][0]="agence 9";
  $agences[8][1]="1025 avenue Henri Becquerel, Montpellier, France";
  $agences[8][2]=1;
  
  $agences[9][0]="agence 10";
  $agences[9][1]="4 rue piroux, Nancy, France";
  $agences[9][2]=1;
  
  $agences[10][0]="agence 11";
  $agences[10][1]="107 avenue de la rochelle, Niort, France";
  $agences[10][2]=1;
  
  $agences[11][0]="agence 12";
  $agences[11][1]="6 rue des chataigners, Ormes, France";
  $agences[11][2]=1;
  
  $agences[12][0]="agence 12";
  $agences[12][1]="6 rue des chataigners, Ormes, France";
  $agences[12][2]=1;
  
  $agences[13][0]="agence 13";
  $agences[13][1]="6 rue Clement Ader, Reims, France";
  $agences[13][2]=1;
  
  $agences[14][0]="agence 14";
  $agences[14][1]="26 rue Jules Dalou, Toulouse, France";
  $agences[14][2]=1;
  
  $agences[15][0]="agence 15";
  $agences[15][1]="10 rue Joseph Audio, Vannes, France";
  $agences[15][2]=1;
  
  $cpt=0;
  foreach ($agences as $agence)
  {
        $strjs[$cpt]='"'.$agence[1].'","'.$agence[0].'",'.$agence[2];
        $cpt++;
  }
  echo '<body onload=\'var tab=new Array(); ';
  
  $cpt=0;
  foreach ($strjs as $str)
  {
        echo 'tab['.$cpt.'] = new Array('.$str.');'; 
        $cpt++;
  }
  
  echo 'codeAddress(tab);\'>';
?>    <div id="map-canvas"></div>
  </body>
</html>

**tagia** · 01/10/2014, 12h31

probleme resolu apres modification, lors de 'lencapsulation j'utilisais toujours la variable avant encapsulation
quel naze ^^
Merci

Marker map title [Google Maps]

APIs Google

Discussions similaires

Partager

Partager