Itinéraire entre des markers

**razuberi** · 22/04/2011, 10h34

Bonjour,
Dans le cadre d'un projet je dois effectuer une application vb.net qui affiche Google maps dans un form. Tout ce passe sur la discussion JavaScript - vb.net
Dans le code Vb.net, il n'y a pas de soucis. Par contre j'ai un soucis au niveau du javascript.
Tous les markers s'affichent au chargement de la page. Je dois faire un itinéraire. Je voudrais que lorsqu'on clique sur un premier marker, l'adresse correspondant au marker s'enregistre entant que marker de départ et lorsqu'on clique sur un deuxième marker l'adresse s'enregistre en arrivée.
Voici mon code pour vous aider à comprendre.

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
<!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" xmlns:v="urn:schemasmicrosoft-
com:vml">
 
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
 
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAjuEjZcNxU59OgIDuivvMMhTP29aao7d1SCCX-sCSU7NEeMMc8RT8HqYUTyviE9pZRajsFrp4iiBntg"></script> <!-- adresse google maps -->
 
 
 
<!-- Application -->
<script type="text/javascript">
 
var geocoder;
var map;
var directionDisplay;
var depart,arrivee;
var clique = true ;
var infoTabs = [];
var marker;
 
 
function initialize() {
 
//initialisation de la carte
geocoder=new GClientGeocoder();
var paris = new GLatLng(48.8566667, 2.3509871);
// options zoom et type de carte
map = new GMap2(document.getElementById("map2"));
 
//zoom molette de la souris 
map.enableScrollWheelZoom();
// controle du zoom
map.addControl(new GLargeMapControl());
// controle type map + nom des rues
map.addControl(new GHierarchicalMapTypeControl());
 
}
 
function show(address, inter,nom, email, tel, port , panne, memo) {
geocoder.getLatLng ( address, function(point) {
 
 
// récupération des coordonnées
var a = point.lat();
var b = point.lng();
 
infoTabs = [
new GInfoWindowTab('Appareil', '<div> <img src="ceat_homepage.bmp" style="float:right;"> </div>'+'<div class = "style" > Numéro Intervention: </div>' + '<div class = "design" >'+inter + '</div></br>' + '<div class = "style" >Panne: </div>' + '<div class = "design" >' + panne + '</div></br>' + '<div class = "style" >Mémo: </div>' + '<div class = "design" >' + memo + '</div>' ),
new GInfoWindowTab('Client', '<div class = "style" > Nom - Prénom: </div> ' + '<div class = "nom">' + nom + '</div></br> ' + '<div class = "style" > Adresse: </div>'+ '<div class = "address">' + address + '</div></br>' +'<div class = "style" >email: </div>' + '<div class = "email" >' + email + '</div></br>' + '<div class = "style" >Téléphone : </div>' + '<div class = "design" >' + tel + '</div></br>' + '<div class = "style" > Portable : </div>' + '<div class = "design" >' + port + '</div>' )
];
 
// Création d'un marker
marker = new GMarker(point);
if (clique){
GEvent.addListener(marker,"click", function(){
CliqueMarker(address, inter);
});
clique = false;
}
 
if (!clique){
GEvent.addListener(marker,"click",function() {
CliqueMarker2(address, inter);
}) ;
clique= true;}
map.addOverlay(marker);
 
// Centrage sur la France
map.setCenter(new GLatLng(a,b), 6);		
})		
}
 
function CliqueMarker(_address, _inter ) {
marker.openInfoWindowTabsHtml(infoTabs);
//récupère le numéro d'inter discussion avec le vb.net
window.external.test(_inter);
depart = _address;
alert(depart + "deb");
 
}
 
function CliqueMarker2(_address, _inter) {
marker.openInfoWindowTabsHtml(infoTabs);
//récupère le numéro d'inter discussion avec le vb.net
window.external.test(_inter);
arrivee = _address;
alert(arrivee + "fin");
//alert(clique);
directionDisplay = new GDirections(map, document.getElementById("texte"));
alert(depart + "début" + arrivee + "arrivée");
setDirections(depart, arrivee);
}
function setDirections(fromAddress, toAddress) {
directionDisplay.load("from: " + fromAddress + " to: " + toAddress);
}
</script>
</head>
 
<body onload="initialize()">			
<!-- espaces pour intégrer les coordonées -->
<input type ="hidden" id="lat" value=""/> 
<input type ="hidden" id="lng" value=""/>
 
<!-- espace où la map va s'afficher -->
<div id="map2" style="border: 1px solid black;  width: 750px; height: 400px"> </div>
<div id="texte"></div>
</body>
 
</html>

Le problème est que mon adresse de début et mon adresse d'arrivée sont les mêmes, je crois que le soucis est au niveau du GEvent.addListener, je crois comprendre un truc mais j'ai quand même besoin de vos lumières.

Merci de votre aide.

**razuberi** · 22/04/2011, 15h31

Du coup j'ai trouvé toute seule ce qu'il fallait faire.

Code :

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

1
2
3
4
5
6
7
8
9
10
GEvent.addListener(marker,"click", function(){
if (clique){
CliqueMarker(address, inter );
clique = false;
}								
else {
CliqueMarker2(address, inter);
clique = true;
}
});

Voila