Api Google Maps - Itineraire - Calculer un itinéraire routier - GDirections

CALCULER UN ITINÉRAIRE ROUTIER
CLASSE GDirections - google.maps.Directions

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.

Article créé le : 17/03/2009

Dernière modification le : 03/11/2009

Présentation

"GDirections" est employé pour le calcul d'itinéraires. L'affichage se fait sous la forme d'une carte et/ou d'un descriptif détaillé de cet itinéraire.

GDirections(carteItineraire, texteItineraire) : Comment ca marche ?

Pour calculer un itinéraire, il vous faut :

Donner un nom à votre itinéraire ( exemple : monItineraire ),

Donner un nom à la carte dans laquelle l'itinéraire va s'afficher ( exemple : carteItineraire ),
Préciser l'emplacement, dans votre page web, ou va s'afficher la carte nommée carteItineraire, à l'aide, par exemple, d'une balise <div> ayant pour identifiant : id="EmplacementCarteItineraire",

Donner un nom au descriptif détaillé de l'itinéraire ( exemple : texteItineraire ),
Préciser l'emplacement, dans votre page web, ou va s'afficher le descriptif détaillé de l'itinéraire nommé texteItineraire, à l'aide, par exemple, d'une balise <div> ayant pour identifiant : id="EmplacementTexteItineraire",

Schéma récapitulatif

Exemple :

Création d'une carte nommée "carteItineraire" qui prendra place dans la <div> ayant pour identifiant id="EmplacementCarteItineraire"

Ligne Repère N°°5 :


  carteItineraire = new GMap2(document.getElementById("EmplacementCarteItineraire"));

Ou si vous utilisez Google AJAX API loader :

Ligne Repère N°6 :


  carteItineraire = new google.maps.Map2(document.getElementById("EmplacementCarteItineraire"));

Le descriptif détaillé de l'itinéraire est nommé "texteItineraire" et il prendra place dans la <div> ayant pour identifiant id="EmplacementTexteItineraire"

Lignes Repère N°8 Repère N°7 :


  texteItineraire = document.getElementById("EmplacementTexteItineraire");

Création d'un itinéraire nommé "monItineraire" dont le résultat graphique (carte, polyline, marqueur et fenêtres) s'affichera dans la carte nommée "carteItineraire" et dont l'itinéraire détaillé, au format texte, s'affichera dans "texteItineraire"

Ligne Repère N°8 :


  monItineraire = new GDirections(carteItineraire, texteItineraire);

Ou si vous utilisez Google AJAX API loader :

Ligne Repère N°9 :


  monItineraire = new google.maps.Directions(carteItineraire, texteItineraire);

Il ne reste plus qu'à envoyer une requête aux serveurs de Google afin de calculer l'itinéraire désiré, par exemple entre Tours et La Riche : from: Tours,FR to: Paris,FR. Si la requête aboutit, l'itinéraire s'affichera à la fois sous forme de carte et de texte.

Lignes Repère N°10 Repère N°9 :


  monItineraire.load("from: Tours,FR to: Paris,FR");

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 : Calculer un itinéraire routier</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 carteItineraire;
var texteItineraire;
var monItineraire;
 
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... 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.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
carteItineraire.setCenter(new google.maps.LatLng(47.341571,0.514233), 13);
/* ... texteItineraire : contenu de 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);
/* ... Envoi la requête aux serveurs de Google afin d'établir un itinéraire ... */
/* ... entre Tours et Paris. Si la requête aboutit, l'itinéraire         ... */
/* ... s'affichera sous forme de carte et de texte                          ... */
monItineraire.load("from: Tours,FR to: Paris,FR");
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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');
}
}
/* 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 "carteItineraire", va venir s'afficher à l' intérieur de  -->
<!-- la balise <div> ayant pour identifiant id="EmplacementCarteItineraire".   -->
<!-- Elle fera donc 100% de large et 400 pixels de haut.                 -->
<div id="EmplacementCarteItineraire" style="width:100%; height:400px;"></div>
<!-- Le descriptif de l'itinéraire "monItineraire", va venir s'afficher à l'intérieur -->
<!--  de la balise <div> ayant pour identifiant id="EmplacementTexteItineraire".      -->
<div id="EmplacementTexteItineraire"></div>
</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 : Calculer un itinéraire routier</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 carteItineraire;
var texteItineraire;
var monItineraire;
 
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... 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.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
carteItineraire.setCenter(new GLatLng(47.341571,0.514233), 13);
/* ... texteItineraire : contenu de 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 la "texteItineraire"             ... */
monItineraire= new GDirections(carteItineraire, texteItineraire);
/* ... Envoi la requête aux serveurs de Google afin d'établir un itinéraire ... */
/* ... entre Tours et Paris. Si la requête aboutit, l'itinéraire         ... */
/* ... s'affichera sous forme de carte et de texte                          ... */
monItineraire.load("from: Tours,FR to: Paris,FR");
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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');
}
}
//]]>
</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 "carteItineraire", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementCarteItineraire".  -->
<!-- Elle fera donc 100% de large et 400 pixels de haut.         -->
<div id="EmplacementCarteItineraire" style="width:100%; height:400px;"></div>
<!-- Le descriptif de l'itinéraire "monItineraire", va venir s'afficher à l'intérieur -->
<!--  de la balise <div> ayant pour identifiant id="EmplacementTexteItineraire".      -->
<div id="EmplacementTexteItineraire"></div>
</body>
</html>

Afficher la carte ou le descriptif

Dans :


  monItineraire = new GDirections(carteItineraire, texteItineraire);

Ou si vous utilisez Google AJAX API loader :


  monItineraire = new google.maps.Directions(carteItineraire, texteItineraire);

lorsque l'argument carteItineraire est passé dans "new GDirections()" ou "new google.maps.Directions()", toutes les fois qu'un nouvel itinéraire sera calculé, les polylines et marqueurs liés au résultat seront automatiquement ajoutés à la carte située dans la balise <div id="EmplacementCarteItineraire">.

De même, lorsque l'argument texteItineraire est passé dans "new GDirections()" ou "new google.maps.Directions()", toutes les fois qu'un nouvel itinéraire sera calculé, le descriptif de l'itinéraire lié au résultat sera ajouté à la balise <div id="EmplacementTexteItineraire">, remplaçant ainsi le contenu déjà existant.

Si l'un ou l'autre de ces arguments est null, les éléments associés ne seront pas recherchés à moins qu'ils ne soient explicitement demandés dans la méthode de monItineraire.load().

Afficher le descriptif de l'itinéraire sans la carte

Lignes Repère N°45 Repère N°5 Repère N°6 :


  texteItineraire = document.getElementById("EmplacementTexteItineraire");

  monItineraire = new GDirections(null, texteItineraire);

  monItineraire.load("from: Tours,FR to: Paris,FR");

Ou si vous utilisez Google AJAX API loader :

Lignes Repère N°5 Repère N°6 Repère N°7 :


  texteItineraire = document.getElementById("EmplacementTexteItineraire");

  monItineraire = new google.maps.Directions(null, texteItineraire);

  monItineraire.load("from: Tours,FR to: Paris,FR");

Résultat : Descriptif

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 : Calculer un itinéraire routier</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 texteItineraire;
var monItineraire;
 
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... texteItineraire : contenu de la balise <div> ayant pour identifiant id="EmplacementTexteItineraire" ... */
texteItineraire = document.getElementById("EmplacementTexteItineraire");
/* ... Création d'un nouvel itinéraire nommé "monItineraire"               ... */
/* ... On ne souhaite pas utiliser la carte, on indique donc "null"        ... */
/* ... Le résultat s'affichera sous forme textuelle dans "texteItineraire" ... */
monItineraire= new google.maps.Directions(null, texteItineraire);
/* ... Envoi la requête aux serveurs de Google afin d'établir un itinéraire  ... */
/* ... entre Tours et Paris. Si la requête aboutit, seul le               ... */
/* ... descriptif de l'itinéraire s'affichera.                               ... */
monItineraire.load("from: Tours,FR to: Paris,FR");
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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');
}
}
/* 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>
<!-- Le descriptif de l'itinéraire "monItineraire", va venir s'afficher à l'intérieur -->
<!--  de la balise <div> ayant pour identifiant id="EmplacementTexteItineraire".      -->
<div id="EmplacementTexteItineraire"></div>
</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 : Calculer un itinéraire routier</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 texteItineraire;
var monItineraire;
 
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... texteItineraire : contenu de la balise <div> ayant pour identifiant id="EmplacementTexteItineraire" ... */
texteItineraire = document.getElementById("EmplacementTexteItineraire");
/* ... Création d'un nouvel itinéraire nommé "monItineraire"               ... */
/* ... On ne souhaite pas utiliser la carte, on indique donc "null"        ... */
/* ... Le résultat s'affichera sous forme textuelle dans "texteItineraire" ... */
monItineraire= new GDirections(null, texteItineraire);
/* ... Envoi la requête aux serveurs de Google afin d'établir un itinéraire  ... */
/* ... entre Tours et Paris. Si la requête aboutit, seul le               ... */
/* ... descriptif de l'itinéraire s'affichera.                               ... */
monItineraire.load("from: Tours,FR to: Paris,FR");
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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');
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
//]]>
</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()">
<!-- Le descriptif de l'itinéraire "monItineraire", va venir s'afficher à l'intérieur -->
<!--  de la balise <div> ayant pour identifiant id="EmplacementTexteItineraire".      -->
<div id="EmplacementTexteItineraire"></div>
</body>
</html>

Afficher la carte de l'itinéraire sans son descriptif

Lignes Repère N°4 Repère N°6 Repère N°7 :


  carteItineraire = new GMap2(document.getElementById("EmplacementCarteItineraire"));

  monItineraire = new GDirections(carteItineraire, null);

  monItineraire.load("from: Tours,FR to: Paris,FR");

Ou si vous utilisez Google AJAX API loader :

Lignes Repère N°5 Repère N°7 Repère N°8 :


  carteItineraire = new google.maps.Map2(document.getElementById("EmplacementCarteItineraire"));

  monItineraire = new google.maps.Directions(carteItineraire, null);

  monItineraire.load("from: Tours,FR to: Paris,FR");

Résultat : Carte

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 : Calculer un itinéraire routier</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 carteItineraire;
var monItineraire;
 
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... 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.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
carteItineraire.setCenter(new google.maps.LatLng(47.341571,0.514233), 13);
/* ... Création d'un nouvel itinéraire nommé "monItineraire" ... */
/* ... Le résultat s'affichera sous forme de carte dans la carte nommée "carteItineraire" ... */
/* ... On ne souhaite pas utiliser le résultat sous forme textuelle, on indique donc "null" ... */
monItineraire= new google.maps.Directions(carteItineraire, null);
/* ... Envoi la requête aux serveurs de Google afin d'établir un itinéraire ... */
/* ... entre Tours et Paris. Si la requête aboutit, l'itinéraire         ... */
/* ... s'affichera sous forme de carte uniquement.                          ... */
monItineraire.load("from: Tours,FR to: Paris,FR");
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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');
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
</head>
 
<body>
<!-- La carte nommée "carteItineraire", va venir s'afficher à l' intérieur de  -->
<!-- la balise <div> ayant pour identifiant id="EmplacementCarteItineraire". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut.         -->
<div id="EmplacementCarteItineraire" style="width:100%; height:400px;"></div>
</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 : Calculer un itinéraire routier</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 carteItineraire;
var monItineraire;
 
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... 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.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
carteItineraire.setCenter(new GLatLng(47.341571,0.514233), 13);
/* ... Création d'un nouvel itinéraire nommé "monItineraire" ... */
/* ... Le résultat s'affichera sous forme de carte dans la carte nommée "carteItineraire" ...   */
/* ... On ne souhaite pas utiliser le résultat sous forme textuelle, on indique donc "null" ... */
monItineraire= new GDirections(carteItineraire, null);
/* ... Envoi la requête aux serveurs de Google afin d'établir un itinéraire ... */
/* ... entre Tours et Paris. Si la requête aboutit, l'itinéraire         ... */
/* ... s'affichera sous forme de carte uniquement.                          ... */
monItineraire.load("from: Tours,FR to: Paris,FR");
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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');
}
}
//]]>
</script>
</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 "carteItineraire", va venir s'afficher à l' intérieur de  -->
<!-- la balise <div> ayant pour identifiant id="EmplacementCarteItineraire".   -->
<!-- Elle fera donc 100% de large et 400 pixels de haut.                 -->
<div id="EmplacementCarteItineraire" style="width:100%; height:400px;"></div>
</body>
</html>

Remarque(s)

Par défaut, la carte se centre de façon à optimiser l'affichage de l'itinéraire sur la carte.

Pour calculer un itinérare on peut indiquer aussi bien une adresse postale que des coordonnées GPS.

Exemples :


  monItineraire.load("from: Tours,FR to: Paris,FR");


  monItineraire.load("from: 47.388355,0.690422 to: ParisFR");


  monItineraire.load("from: 47.388355,0.690422 to: 47.387789,0.662162");


  monItineraire.load("from: Tours,FR to: 47.387789,0.662162 to: Amboise to: 47.33041,1.066554");

Navigation

Forum d'aide

Forum d'aide Google Maps

Traduction - Translate

Géo Web Actu

La modernisation de la défense

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Référence en Français

La classe " Essentielle "

GMap2

Les classes de " Base "

Les classes " Événement "

Les classes " Contrôle "

Les classes " Couche "

Les classes " Service "

API Google Maps - API Google Earth - Fichiers KML KMZ - Aide Didacticiel Documentation Exemple Tutoriels Trucs et Astuces en Français sur TouraineVerte.com
Formation et tutoriels sur les cartes API Google Maps | Formation et tutoriels sur les cartes API Google Earth | Formation et tutoriels sur les Fichiers KML KMZ
Développeur freelance auto-entrepreneur carte Google Maps Earth API | http://www.TouraineVerte.com | © 2010 - Plan du site | fadamaps37@touraineverte.com

Api Google Maps Version 2ItineraireCALCULER UN ITINÉRAIRE ROUTIER CLASSE GDirections - google.maps.Directions

CALCULER UN ITINÉRAIRE ROUTIER CLASSE GDirections - google.maps.Directions

Présentation

GDirections(carteItineraire, texteItineraire) : Comment ca marche ?

Schéma récapitulatif

Carte

Code

Code : Avec Google Ajax API Loader

Code : Sans Google Ajax API Loader

Afficher la carte ou le descriptif

Afficher le descriptif de l'itinéraire sans la carte

Résultat : Descriptif

Code : Avec Google Ajax API Loader

Code : Sans Google Ajax API Loader

Afficher la carte de l'itinéraire sans son descriptif

Résultat : Carte

Code : Avec Google Ajax API Loader

Code : Sans Google Ajax API Loader

Remarque(s)

Navigation

Forum d'aide

Traduction - Translate

Géo Web Actu

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Référence en Français

La classe " Essentielle "

Les classes de " Base "

Les classes " Événement "

Les classes " Contrôle "

Les classes " Couche "

Les classes " Service "

Api Google Maps Version 2
Itineraire
CALCULER UN ITINÉRAIRE ROUTIER
CLASSE GDirections - google.maps.Directions

CALCULER UN ITINÉRAIRE ROUTIER
CLASSE GDirections - google.maps.Directions