Api Google Maps - Itineraire - Calculer un itinéraire pour piéton ou routier avec ou sans autoroutes

ITINÉRAIRE PIÉTON OU ROUTIER AVEC OU SANS AUTOROUTE
GDirections - travelMode - avoidHighways - preserveViewport
G_TRAVEL_MODE_DRIVING - G_TRAVEL_MODE_WALKING

Article créé le : 16/06/2009

Présentation

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.

locale:de - Allemand
locale:en - Anglais
locale:es - Espagnol
locale:fr - Français
locale:ja - Japonais
locale:ru - Russe
locale:de - Suisse
locale:th - Thaïlande

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 :

travelMode = G_TRAVEL_MODE_DRIVING : déplacement effectué par la route,
travelMode = G_TRAVEL_MODE_WALKING : déplacement effectué par les sentiers pédestres et trottoirs (lorsqu'ils sont disponibles).

avoidHighways - autorise ou non l'utilisation d'autoroutes pour le calcul de l'itinéraire :

avoidHighways = true : l'itinéraire doit éviter les autoroutes,
avoidHighways = false : l'itinéraire peut emprunter les autoroutes lorsqu'elles existent.

preserveViewport - recadre ou non la carte pour afficher la totalité de l'itinéraire calculé :

preserveViewport = true : le centre et le niveau de zoom de la carte ne seront pas optimisés afin d'afficher l'ensemble de l'itinéraire.
preserveViewport = false : le centre et le niveau de zoom de la carte seront optimisés afin d'afficher l'ensemble de l'itinéraire.

Carte

Code

Code : Avec Google Ajax API Loader

<?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>
<script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_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>
<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>
<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>

Code : Sans Google Ajax API Loader

<?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>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_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>
<body onload="initialize()" onunload="GUnload()">
<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>
<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>

Api Google Maps
Itineraire
ITINÉRAIRE PIÉTON OU ROUTIER AVEC OU SANS AUTOROUTE
GDirections - travelMode - avoidHighways - preserveViewport
G_TRAVEL_MODE_DRIVING - G_TRAVEL_MODE_WALKING

ITINÉRAIRE PIÉTON OU ROUTIER AVEC OU SANS AUTOROUTE
GDirections - travelMode - avoidHighways - preserveViewport
G_TRAVEL_MODE_DRIVING - G_TRAVEL_MODE_WALKING

Présentation

Carte

Code

Code : Avec Google Ajax API Loader

Code : Sans Google Ajax API Loader

Rechercher

Navigation

Forum

Traduction - Translate

Géo Web Actu

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Api Google MapsItineraireITINÉRAIRE PIÉTON OU ROUTIER AVEC OU SANS AUTOROUTEGDirections - travelMode - avoidHighways - preserveViewportG_TRAVEL_MODE_DRIVING - G_TRAVEL_MODE_WALKING

ITINÉRAIRE PIÉTON OU ROUTIER AVEC OU SANS AUTOROUTEGDirections - travelMode - avoidHighways - preserveViewportG_TRAVEL_MODE_DRIVING - G_TRAVEL_MODE_WALKING

Présentation

Carte

Code

Code : Avec Google Ajax API Loader

Code : Sans Google Ajax API Loader

Rechercher

Navigation

Forum

Traduction - Translate

Géo Web Actu

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Api Google Maps
Itineraire
ITINÉRAIRE PIÉTON OU ROUTIER AVEC OU SANS AUTOROUTE
GDirections - travelMode - avoidHighways - preserveViewport
G_TRAVEL_MODE_DRIVING - G_TRAVEL_MODE_WALKING

ITINÉRAIRE PIÉTON OU ROUTIER AVEC OU SANS AUTOROUTE
GDirections - travelMode - avoidHighways - preserveViewport
G_TRAVEL_MODE_DRIVING - G_TRAVEL_MODE_WALKING