Créer markeur au dessus d'un autre

**abel.ludba** · 27/06/2013, 20h56

Salut
Dans mon application j'ai plusieurs milliers de markeurs.
J'en ai mis dans ce morceau de code 2 seulements.

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> Nancy - TP, MthMselle, Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null; 
  var markers = [];
  var directionsVisible = false;
  var locations = [
      ['nancy', 48.6833, 6.1667, 4],
      ['Richardmenil', 48.5833, 6.1067, 5]       
    ];
	//
	 var marker_arr, i;
	 //
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var nancy = new google.maps.LatLng(48.6833, 6.1667);
    var myOptions = {
      zoom:10,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: nancy
    }
 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 // Markers
    for (i = 0; i < locations.length; i++) {  
        marker_arr = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
	  }
	  //
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
 
    google.maps.event.addListener(map, 'click', function(event) {
      if (origin == null) {
        origin = event.latLng;
        addMarker(origin);
      } else if (destination == null) {
        destination = event.latLng;
        addMarker(destination);
      }  
    });
  }
//
  function addMarker(latlng) {
    markers.push(new google.maps.Marker({
      position: latlng, 
      map: map,
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    }));    
  }
//
  function calcRoute() {
    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }
 
    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }
 
    var mode;
    switch (document.getElementById("mode").value) {
 
      case "driving":
        mode = google.maps.DirectionsTravelMode.DRIVING;
        break;
 
    }
 
    var request = {
        origin: origin,
        destination: destination, 
        travelMode: mode 
    };
 
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
 
    clearMarkers();
    directionsVisible = true;
  }
 // 
  function updateMode() {
    if (directionsVisible) {
      calcRoute();
    }
  }
//  
  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }
 
  function clearWaypoints() {
    markers = [];
    origin = null;
    destination = null; 
    directionsVisible = false;
  }
 // 
  function reset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
 // 
</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
  <table style="width: 400px">
    <tr>
 
      <td>
        <select id="mode" onchange="updateMode()">
 
          <option value="driving">Driving</option>
        </select>
      </td>
    </tr>
    <tr>
 
      <td><input type="button" value="Reset" onclick="reset()" /></td>
    </tr>
    <tr>
 
      <td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td>
      <td></td>
    </tr>
  </table>
  <div style="position:relative; border: 1px; width: 610px; height: 400px;">
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div>
  </div>
</body>
</html>

Les utilisateurs ont la possibilités de mesurer la distance, par route, entre 2 points. Je voudrais permettre aux utilisateurs de clicker sur les markeurs existants (commen ceux sur la carte) pour mesurer les distances. Seulement je n'y arrive pas.
Ce serait le moyen le plus optimal pour faire cela?
Merci

**NoSmoking** · 28/06/2013, 19h52

Bonjour,
j'ai du mal à comprendre ce que tu n'arrives pas à mettre en place!

Sur l'événement click des markers tu affecte au premier le origine et au suivant le destination.

**abel.ludba** · 29/06/2013, 02h25

Salut
Quand je clique n'importe ou sur la carte cela fonctionne. Mais, j'aimerais que cela fonctionne aussi quand je clicke sur les markers déjà existants ( comme ceux par exemple sur la carte).
Mes utilisateurs aimeraient que quand ils cliquent sur les markers existants que de nouveaux marekeurs ( ceux d'origine et de destination) appraissent sur la carte au dessus .
Comment faire? J'n y arrive pas.
Merci encore

**NoSmoking** · 29/06/2013, 06h40

Comment afficher un marker au-dessus des autres ?

**abel.ludba** · 29/06/2013, 15h26

J'ai essayé de mettre cela en application.
Voila comment (je remes tout le code)

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
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> Nancy - TP, MthMselle, Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null; 
  var markers = [];
  var directionsVisible = false;
  var locations = [
      ['nancy', 48.6833, 6.1667, 4],
      ['Richardmenil', 48.5833, 6.1067, 5]       
    ];
	//
	 var marker_arr, i;
	 var isDriving=false;
	 //
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var nancy = new google.maps.LatLng(48.6833, 6.1667);
    var myOptions = {
      zoom:10,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: nancy
    }
 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 // Markers
    for (i = 0; i < locations.length; i++) {  
        marker_arr = new google.maps.Marker({
		zIndex: 0,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
	  }
	  //
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
 
    google.maps.event.addListener(map, 'click', function(event) {
      if (origin == null) {
        origin = event.latLng;
        addMarker(origin, 50);
      } else if (destination == null) {
        destination = event.latLng;
        addMarker(destination,50);
      }  
    });
  }
//
  function addMarker(latlng, zzz) {
    markers.push(new google.maps.Marker({
	  zIndex: zzz,
      position: latlng, 
      map: map,
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    }));
 
  }
//
  function calcRoute() {
    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }
 
    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }
 
    var mode;
    switch (document.getElementById("mode").value) {
 
      case "driving":
        mode = google.maps.DirectionsTravelMode.DRIVING;
        break;
 
    }
 
    var request = {
        origin: origin,
        destination: destination, 
        travelMode: mode 
    };
 
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
 
    clearMarkers();
    directionsVisible = true;
  }
 // 
  function updateMode() {
    if (directionsVisible) {
      calcRoute();
    }
  }
//  
  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }
 
  function clearWaypoints() {
    markers = [];
    origin = null;
    destination = null; 
    directionsVisible = false;
  }
 // 
  function reset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
  //
 
 // 
</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
  <table style="width: 400px">
    <tr>
 
      <td>
        <select id="mode" onchange="updateMode()">
 
          <option value="driving">Driving</option>
        </select>
      </td>
    </tr>
    <tr>
 
      <td><input type="button" value="Reset" onclick="reset()" /></td> 
    </tr>
    <tr>
 
      <td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td>
      <td></td>
    </tr>
  </table>
  <div style="position:relative; border: 1px; width: 610px; height: 400px;">
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div>
  </div>
</body>
</html>

:
Cela ne marche pas. Je dois avoir qlq ch qui manque... Je ne sais pas quoi?
Merci encore pour ton aide

**NoSmoking** · 30/06/2013, 10h31

Code :

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

Cela ne marche pas. Je dois avoir qlq ch qui manque... Je ne sais pas quoi?

Je ne vois aucun événement onclick sur tes markers.

**abel.ludba** · 01/07/2013, 05h43

Salut

Je ne vois aucun événement onclick sur tes markers.

Je n'arrive pas à voir à quel endroit je dois ajouter les evenements. Quels markeurs? Pourrais-tu me dire à quel endroit, comment?
Merci

**NoSmoking** · 01/07/2013, 22h48

Je n'arrive pas à voir à quel endroit je dois ajouter les evenements.

le meilleur endroit pour affecter l’événement sur les markers reste dans la boucle de création

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
// Markers
for (i = 0; i < locations.length; i++) {
  marker_arr = new google.maps.Marker({
    zIndex: 0,
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  // ajout de la gestion de l'événement
  google.maps.event.addListener( marker_arr, 'click', function(data){
    // le corps de la fonction
  });
}

**abel.ludba** · 02/07/2013, 01h13

Salut
Merci pour le conseil. Voila comment je l'ai mis en oeuvre:

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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> Nancy - TP, MthMselle, Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = null;
  var destination = null; 
  var markers = [];
  var directionsVisible = false;
  var locations = [
      ['nancy', 48.6833, 6.1667, 4],
      ['Richardmenil', 48.5833, 6.1067, 5]       
    ];
	//
	 var marker_arr, i;
	 //
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var nancy = new google.maps.LatLng(48.6833, 6.1667);
	var distMarker;
    var myOptions = {
      zoom:10,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: nancy
    }
 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 // Markers
    for (i = 0; i < locations.length; i++) {  
        distMarker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
		zIndex:0
      });
 
	 google.maps.event.addListener(distMarker, 'click', (function(distMarker, i) {
	  return function(){
      if (origin == null) {
        origin = distMarker.getPosition(); 
        addMarker(origin);
      } 
	  else if (destination == null) {
        destination = distMarker.getPosition();
 
        addMarker(destination);
      }  
      }  
       })(distMarker, i));
	  }
 
	  //
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
 
manageEvents();
	//addTestMarker();
  }
 //
function manageEvents()
{
 
} 
 
//
//
  function addMarker(latlng) {
    markers.push(new google.maps.Marker({
      position: latlng, 
      map: map,
      icon: "Dist.png",
	  zIndex:5
    }));    
 
  }
//
  function calcRoute() {
    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }
 
    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }
 
    var mode;
    switch (document.getElementById("mode").value) {
 
      case "driving":
        mode = google.maps.DirectionsTravelMode.DRIVING;
        break;
 
    }
 
    var request = {
        origin: origin,
        destination: destination, 
        travelMode: mode 
    };
 
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
 
    clearMarkers();
    directionsVisible = true;
  }
 // 
  function updateMode() {
    if (directionsVisible) {
      calcRoute();
    }
  }
//  
  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }
 
  function clearWaypoints() {
    markers = [];
    origin = null;
    destination = null; 
    directionsVisible = false;
  }
 // 
  function reset() {
    clearMarkers();
    clearWaypoints();
    directionsDisplay.setMap(null);
    directionsDisplay.setPanel(null);
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
  }
 // 
  function addTestMarker() {
      var testMarker=new google.maps.Marker({
      position: new google.maps.LatLng(48.6833, 6.1667), 
      map: map,
      icon: "Dist.png"
    });    
  }
 //
</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
  <table style="width: 400px">
    <tr>
 
      <td>
        <select id="mode" onchange="updateMode()">
 
          <option value="driving">Driving</option>
        </select>
      </td>
    </tr>
    <tr>
 
      <td><input type="button" value="Reset" onclick="reset()" /></td>
    </tr>
    <tr>
 
      <td><input type="button" value="Get Directions!" onclick="calcRoute()" /></td>
      <td></td>
    </tr>
  </table>
  <div style="position:relative; border: 1px; width: 610px; height: 400px;">
    <div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
    <div id="directionsPanel" style="position:absolute; left: 410px; width:240px; height:400px; overflow: auto"></div>
  </div>
</body>
</html>