Bonjour,
Je voudrai personnaliser les marqueurs d'origine de départ et d'arrivée du service google map itinéraire.
J'ai réussi à supprimer les marqueurs et à créer le marqueur "destination" mais je n'arrive pas à trouver le code pour la position du marqueur "origin" étant donné que la position change suivant la provenance rentrée par l'utilisateur.
Merci de votre aide.
Voici le code de la page.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>
		Calcul itinéraire
	</title>
	<!-- Ce meta tag spécifie que la carte sera affichée
    à la dimension imposée et de sera pas modifiable par l'utilisateur -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 
    <style type="text/css">
			#map_canvas { width: 620px; height: 400px; margin: auto;}
			#panel { margin: auto; width: 620px; }
			fieldset { width: 620px; margin: auto; }
			#arrivee { position: fixed; top: -1000px; left: 0; }
		</style>			
</head>
 
<!-- Au chargement de la page, charge la fonction "initialize()". -->
  <body onload="initialize()">
 
<div id="global">
		<div id="contenu">
		<h2>Le col de la Boucharde</h2>
			<h3>Itinéraire automobile.</h3>					
<form action="boucharde.php" method="get" name="direction" id="direction">
	<fieldset>
		<legend>Accès au parking sur la D 2202</legend>
		<div id="label_12">
			<label>Indiquez votre provenance.</label>
			<input type="text" title="Adresse ou coordonnées GPS" name="origin" id="origin" class="depart" />
		</div>					
		<div id="arrivee">
			<input  type="text" value="44.244587, 6.757144" name="destination" id="destination"  />
		</div>									
		   <input id="button_6" type="button" value="Calculer l'itinéraire" onclick="javascript:calculate()" />	
	</fieldset>		
</form><br />
 
        <div id="panel"></div>
        <div id="map_canvas">
            <p>Veuillez patienter pendant le chargement de la carte...</p>
        </div>											
		</div>			
</div>
 
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
	<script type="text/javascript">
	var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var latlng = new google.maps.LatLng(44.089224, 6.853763999999956); // Correspond au centre de la carte (Guillaumes)
var myOptions = {
zoom: 12, 
center: latlng,
 scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP 
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
		// Marker parking
var parking = new google.maps.LatLng(44.244587, 6.757144); // Parking de la randonnée.
var marker = new google.maps.Marker({
	position: parking,
	map: map,
	clickable: true,
	zIndex: 10000,
	title: 'Le col de la Boucharde',
	icon: "http://randos.montagne.free.fr/scripts/images/parking.png"
});
var infobulle = new google.maps.InfoWindow({
	content: '<h4 style="text-align: center;">Le col de la Boucharde</h4><p style="text-align: center;">Départ de la randonnée.<br /> Parking sur la D 2202 au dessus du refuge de la Cantonnière</p>' +	
							'<p style="text-align: center;">Coordonnées GPS: 44.244587, 6.757144</p>'
 
});
 
google.maps.event.addListener(marker, 'click', function(){
	infobulle.open(map, marker);
});
 
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.suppressMarkers = true; // supprime les marqueurs 
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(
'panel'));
}
function calculate(){
directionsService.route({
origin: document.getElementById('origin').value,
destination: document.getElementById('destination').value,
unitSystem: google.maps.DirectionsUnitSystem.METRIC,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status){
if (status == google.maps.DirectionsStatus.OK){
directionsDisplay.setDirections(result);
} else {
alert('Le calcul d\'itinéraire a échoué.');
}
});
}
	</script>
 
</body>
</html>