Itineraire
Calculer un itinéraire pour piéton ou routier avec ou sans autoroutes.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
Nous avons vu, dans un précédent article ( Api Google Maps - Itineraire - Calculer un itinéraire routier - GDirections - google.maps.Directions ), comment calculer, par défaut, un itinéraire à l'aide de GDirections.
Le calcul de l'itinéraire peut être adapté à vos besoins à l'aide des options suivantes :
locale : si ce paramètre est fourni, il détermine la langue à utiliser pour afficher le résultat textuel de l'itinéraire.
Il permet de passer outre le paramètre hl indiqué dans la balise <script> pour appeler le script Google Maps :
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=votre_cle_api&hl=fr&sensor=true">
Si, les paramètres locale et hl ne sont pas spécifiés, alors la langue du navigateur sera utilisée par défaut.
travelMode - fixe le mode de déplacement à utiliser pour le calcul de l'itinéraire :
avoidHighways - autorise ou non l'utilisation d'autoroutes pour le calcul de l'itinéraire :
preserveViewport - recadre ou non la carte pour afficher la totalité de l'itinéraire calculé :
<?xml version="1.0" encoding="utf-8"?>
<!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:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : Calcul itinéraire routier et pédestre</title>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
//<![CDATA[
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */
var monItineraire;
var carteItineraire;
var texteItineraire;
var couleur;
var optionsItineraire={}
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* Options définies par défaut pour l'itinéraire */
optionsItineraire={
/* Type d'itinéraire : Routier */
travelMode: G_TRAVEL_MODE_DRIVING,
/* Eviter les autoroutes : Vrai (=oui) */
avoidHighways: true,
/* Préserver la vue actuelle : Vrai (=oui) */
preserveViewport: true
};
/* ... Lorsqu'un "click" sera detecté sur le formulaire nommé "formulaire" alors ... */
document.formulaire.onclick = function(){
/* ... Si le bouton radio "En voiture" est coché ... */
if(document.formulaire.drivingWalking[0].checked) {
/* ... alors l'option "travelMode" est égale à "G_TRAVEL_MODE_DRIVING" ... */
optionsItineraire.travelMode=G_TRAVEL_MODE_DRIVING;
/* ... On autorise l'emploi de la case à cocher "Eviter les autoroutes" ... */
document.formulaire.autoroutes.disabled = false;
/* ... Si la case à cocher "Eviter les autoroutes" est cochée ... */
/* ... alors couleur = "#FF0000" sinon couleur = "#0000FF" ... */
document.formulaire.autoroutes.checked ? couleur = "#FF0000" : couleur = "#0000FF";
}
/* ... Si le bouton radio "A pied" est coché ... */
if(document.formulaire.drivingWalking[1].checked) {
/* ... alors l'option "travelMode" est égale à "G_TRAVEL_MODE_WALKING" ... */
optionsItineraire.travelMode=G_TRAVEL_MODE_WALKING
/* ... On décoche la case à cocher "Eviter les autoroutes" ... */
document.formulaire.autoroutes.checked = false;
/* ... On interdit l'emploi de la case à cocher "Eviter les autoroutes" ... */
document.formulaire.autoroutes.disabled = true;
/* ... Et couleur = "#CC00FF" ... */
couleur = "#CC00FF";
}
/* ... Si la case "Eviter les autoroutes" est cochée alors l'option avoidHighways = true sinon avoidHighways = false ... */
document.formulaire.autoroutes.checked ? optionsItineraire.avoidHighways=true : optionsItineraire.avoidHighways=false;
/* ... Si la case "Ne pas recadrer la carte automatiquement" est cochée alors l'option preserveViewport = true sinon preserveViewport = false ... */
document.formulaire.preserveViewport.checked ? optionsItineraire.preserveViewport=true : optionsItineraire.preserveViewport=false;
}
/* ... Création d'une nouvelle carte nommée "carteItineraire" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementCarteItineraire" ... */
carteItineraire = new google.maps.Map2(document.getElementById("EmplacementCarteItineraire"));
/* ... La carte nommée "carteItineraire" est centrée sur la Latitude 47, la Longitude 2, avec un niveau de zoom égal à 5 ... */
carteItineraire.setCenter(new google.maps.LatLng(47,2), 5);
/* ... Affichage des boutons et contrôles tels qu'ils apparaîssent dans maps.google.fr ... */
carteItineraire.setUIToDefault();
/* ... texteItineraire : correspond à la balise <div> ayant pour identifiant id="EmplacementTexteItineraire" ... */
texteItineraire = document.getElementById("EmplacementTexteItineraire");
/* ... Création d'un nouvel itinéraire nommé "monItineraire" ... */
/* ... Le résultat s'affichera sous forme de carte dans la carte nommée "carteItineraire" ... */
/* ... Le résultat s'affichera sous forme textuelle dans "texteItineraire" ... */
monItineraire = new google.maps.Directions(carteItineraire, texteItineraire);
/* ... lorsque le résultat du calcul de l'itinéraire nommé "monItineraire", ... */
/* ... est réussi et disponible, mais avant que toutes les informations ... */
/* ... ne viennent s'insérer dans la carte et dans le descriptif détaillé ... */
/* ... de l'itinéraire (="load"), alors la fonction "onGDirectionsLoad" est appelée ... */
google.maps.Event.addListener(monItineraire, "load", onGDirectionsLoad);
/* ... lorsque le résultat du calcul de l'itinéraire nommé "monItineraire", ... */
/* ... provoque une erreur (="error"), alors la fonction "handleErrors" est appelée ... */
google.maps.Event.addListener(monItineraire, "error", handleErrors);
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
/** Fonction setDirections() */
/* Cette fonction permet de calculer l'itinéraire demandé. */
/* adresseDepart : Adresse de départ, */
/* adresseArrivee : Adresse d'arrivé, */
/* langue : Langue dans laquelle le descriptif détaillé de l'itinéraire doit apparaître, */
/* optionsItineraire : Options applicables à l'itinéraire. */
function setDirections(adresseDepart, adresseArrivee, langue) {
optionsItineraire.locale = langue;
monItineraire.load("from: " + adresseDepart + " to: " + adresseArrivee, optionsItineraire);
}
/** Fonction onGDirectionsLoad() */
/* Cette fonction va permettre de modifier la couleur du tracé de l'itinéraire */
/* en fonction de son type : */
/* piéton : Violet, */
/* routier (sans autoroutes) : Bleu, */
/* routier avec autoroute : Rouge. */
/* Les paramètres modifiables sont : */
/* color : couleur de la ligne (=couleur), */
/* weight : épaisseur de la ligne en pixels(=5), */
/* opacity : transparence de la ligne - valeur de 0 à 1. */
function onGDirectionsLoad(){
monItineraire.getPolyline().setStrokeStyle({color: couleur, weight: 5, opacity: 1});
}
/** Fonction handleErrors() */
/* Cette fonction permet d'afficher un message d'erreur lorsque le calcul de l'itinéraire */
/* nommé "monItineraire" a échoué */
function handleErrors(){
/* Ouvre une fenêtre d'alerte, dans laquelle s'affiche un message suivi du code erreur */
alert("Aïe ! Une erreur s'est produite - Code erreur : "+monItineraire.getStatus().code);
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
#EmplacementTexteItineraire {background-color: #FFFFFF;}
-->
</style>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementCarteItineraire". -->
<!-- Elle fera donc 70% de large et 400 pixels de haut. -->
<div id="EmplacementCarteItineraire" style="width:70%; height:340px; float:left;"></div>
<div id="EmplacementTexteItineraire" style="width:28%; height:340px; float:right; overflow: auto;background-color:white;"></div>
<p style="clear: both"> </p>
<div style="margin: 1em 0; padding:1em 0; height: auto; border: 1px solid #999; text-align:center; background-color: #eee;">
<form name="formulaire" action="javascript:void%200" onsubmit="setDirections(this.from.value, this.to.value, this.langue.value); return false">
<p style="text-indent:0; text-align:center;">
Départ : <input type="text" size="25" id="adresseDepart" name="from" value="Tours,fr" /> -
Arrivée : <input type="text" name="to" size="25" id="adresseArrivee" value="Genève,ch" /> -
Langue : <select name="langue" id="locale">
<option value="de">Allemand</option>
<option value="en">Anglais</option>
<option value="es">Espagnol</option>
<option value="fr" selected="selected">Français</option>
<option value="ja">Japonais</option>
<option value="ru">Russe</option>
<option value="de">Suisse</option>
<option value="th">Thaïlande</option>
</select><br /><br />
<input name="drivingWalking" type="radio" value="route" checked="checked" /> : <span style="color:#0000FF;font-weight: bold;">En voiture</span> : <input name="autoroutes" type="checkbox" value="" /> <span style="color:#FF0000;font-weight: bold;">Eviter les autoroutes</span> - <input name="drivingWalking" type="radio" value="pieton" /> : <span style="color:#CC00FF;font-weight: bold;">A pied</span><br /><br />
<input name="preserveViewport" type="checkbox" value="" /> : <span style="font-weight: bold;">Ne pas recadrer la carte automatiquement</span><br /><br />
<input name="submit" type="submit" value="Calculer l'itinéraire" />
</p>
</form>
</div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!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:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : Calcul itinéraire routier et pédestre</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Déclaration des variables globales */
var monItineraire;
var carteItineraire;
var texteItineraire;
var couleur;
var optionsItineraire={}
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* Options définies par défaut pour l'itinéraire */
optionsItineraire={
/* Type d'itinéraire : Routier */
travelMode: G_TRAVEL_MODE_DRIVING,
/* Eviter les autoroutes : Vrai (=oui) */
avoidHighways: true,
/* Préserver la vue actuelle : Vrai (=oui) */
preserveViewport: true
};
/* ... Lorsqu'un "click" sera detecté sur le formulaire nommé "formulaire" alors ... */
document.formulaire.onclick = function(){
/* ... Si le bouton radio "En voiture" est coché ... */
if(document.formulaire.drivingWalking[0].checked) {
/* ... alors l'option "travelMode" est égale à "G_TRAVEL_MODE_DRIVING" ... */
optionsItineraire.travelMode=G_TRAVEL_MODE_DRIVING;
/* ... On autorise l'emploi de la case à cocher "Eviter les autoroutes" ... */
document.formulaire.autoroutes.disabled = false;
/* ... Si la case à cocher "Eviter les autoroutes" est cochée ... */
/* ... alors couleur = "#FF0000" sinon couleur = "#0000FF" ... */
document.formulaire.autoroutes.checked ? couleur = "#FF0000" : couleur = "#0000FF";
}
/* ... Si le bouton radio "A pied" est coché ... */
if(document.formulaire.drivingWalking[1].checked) {
/* ... alors l'option "travelMode" est égale à "G_TRAVEL_MODE_WALKING" ... */
optionsItineraire.travelMode=G_TRAVEL_MODE_WALKING
/* ... On décoche la case à cocher "Eviter les autoroutes" ... */
document.formulaire.autoroutes.checked = false;
/* ... On interdit l'emploi de la case à cocher "Eviter les autoroutes" ... */
document.formulaire.autoroutes.disabled = true;
/* ... Et couleur = "#CC00FF" ... */
couleur = "#CC00FF";
}
/* ... Si la case "Eviter les autoroutes" est cochée alors l'option avoidHighways = true sinon avoidHighways = false ... */
document.formulaire.autoroutes.checked ? optionsItineraire.avoidHighways=true : optionsItineraire.avoidHighways=false;
/* ... Si la case "Ne pas recadrer la carte automatiquement" est cochée alors l'option preserveViewport = true sinon preserveViewport = false ... */
document.formulaire.preserveViewport.checked ? optionsItineraire.preserveViewport=true : optionsItineraire.preserveViewport=false;
}
/* ... Création d'une nouvelle carte nommée "carteItineraire" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementCarteItineraire" ... */
carteItineraire = new GMap2(document.getElementById("EmplacementCarteItineraire"));
/* ... La carte nommée "carteItineraire" est centrée sur la Latitude 47, la Longitude 2, avec un niveau de zoom égal à 5 ... */
carteItineraire.setCenter(new GLatLng(47,2), 5);
/* ... Affichage des boutons et contrôles tels qu'ils apparaîssent dans maps.google.fr ... */
carteItineraire.setUIToDefault();
/* ... texteItineraire : correspond à la balise <div> ayant pour identifiant id="EmplacementTexteItineraire" ... */
texteItineraire = document.getElementById("EmplacementTexteItineraire");
/* ... Création d'un nouvel itinéraire nommé "monItineraire" ... */
/* ... Le résultat s'affichera sous forme de carte dans la carte nommée "carteItineraire" ... */
/* ... Le résultat s'affichera sous forme textuelle dans "texteItineraire" ... */
monItineraire = new GDirections(carteItineraire, texteItineraire);
/* ... lorsque le résultat du calcul de l'itinéraire nommé "monItineraire", ... */
/* ... est réussi et disponible, mais avant que toutes les informations ... */
/* ... ne viennent s'insérer dans la carte et dans le descriptif détaillé ... */
/* ... de l'itinéraire (="load"), alors la fonction "onGDirectionsLoad" est appelée ... */
GEvent.addListener(monItineraire, "load", onGDirectionsLoad);
/* ... lorsque le résultat du calcul de l'itinéraire nommé "monItineraire", ... */
/* ... provoque une erreur (="error"), alors la fonction "handleErrors" est appelée ... */
GEvent.addListener(monItineraire, "error", handleErrors);
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
/** Fonction setDirections() */
/* Cette fonction permet de calculer l'itinéraire demandé. */
/* adresseDepart : Adresse de départ, */
/* adresseArrivee : Adresse d'arrivé, */
/* langue : Langue dans laquelle le descriptif détaillé de l'itinéraire doit apparaître, */
/* optionsItineraire : Options applicables à l'itinéraire. */
function setDirections(adresseDepart, adresseArrivee, langue) {
optionsItineraire.locale = langue;
monItineraire.load("from: " + adresseDepart + " to: " + adresseArrivee, optionsItineraire);
}
/** Fonction onGDirectionsLoad() */
/* Cette fonction va permettre de modifier la couleur du tracé de l'itinéraire */
/* en fonction de son type : */
/* piéton : Violet, */
/* routier (sans autoroutes) : Bleu, */
/* routier avec autoroute : Rouge. */
/* Les paramètres modifiables sont : */
/* color : couleur de la ligne (=couleur), */
/* weight : épaisseur de la ligne en pixels(=5), */
/* opacity : transparence de la ligne - valeur de 0 à 1. */
function onGDirectionsLoad(){
monItineraire.getPolyline().setStrokeStyle({color: couleur, weight: 5, opacity: 1});
}
/** Fonction handleErrors() */
/* Cette fonction permet d'afficher un message d'erreur lorsque le calcul de l'itinéraire */
/* nommé "monItineraire" a échoué */
function handleErrors(){
/* Ouvre une fenêtre d'alerte, dans laquelle s'affiche un message suivi du code erreur */
alert("Aïe ! Une erreur s'est produite - Code erreur : "+monItineraire.getStatus().code);
}
//]]>
</script>
<style type="text/css">
<!--
#EmplacementTexteItineraire {background-color: #FFFFFF;}
-->
</style>
</head>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="initialize()" onunload="GUnload()">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 70% de large et 400 pixels de haut. -->
<div id="EmplacementCarteItineraire" style="width:70%; height:340px; float:left;"></div>
<div id="EmplacementTexteItineraire" style="width:28%; height:340px; float:right; overflow: auto;background-color:white;"></div>
<p style="clear: both"> </p>
<div style="margin: 1em 0; padding:1em 0; height: auto; border: 1px solid #999; text-align:center; background-color: #eee;">
<form name="formulaire" action="javascript:void%200" onsubmit="setDirections(this.from.value, this.to.value, this.langue.value); return false">
<p style="text-indent:0; text-align:center;">
Départ : <input type="text" size="25" id="adresseDepart" name="from" value="Tours,fr" /> -
Arrivée : <input type="text" name="to" size="25" id="adresseArrivee" value="Genève,ch" /> -
Langue : <select name="langue" id="locale">
<option value="de">Allemand</option>
<option value="en">Anglais</option>
<option value="es">Espagnol</option>
<option value="fr" selected="selected">Français</option>
<option value="ja">Japonais</option>
<option value="ru">Russe</option>
<option value="de">Suisse</option>
<option value="th">Thaïlande</option>
</select><br /><br />
<input name="drivingWalking" type="radio" value="route" checked="checked" /> : <span style="color:#0000FF;font-weight: bold;">En voiture</span> : <input name="autoroutes" type="checkbox" value="" /> <span style="color:#FF0000;font-weight: bold;">Eviter les autoroutes</span> - <input name="drivingWalking" type="radio" value="pieton" /> : <span style="color:#CC00FF;font-weight: bold;">A pied</span><br /><br />
<input name="preserveViewport" type="checkbox" value="" /> : <span style="font-weight: bold;">Ne pas recadrer la carte automatiquement</span><br /><br />
<input name="submit" type="submit" value="Calculer l'itinéraire" />
</p>
</form>
</div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
