Comment calculer un itinéraire routier ?

Itinéraire Direction exemples et tutoriels en Français

API Google Maps JavaScript version 3

Exemple et tutoriel pour calculer un itinéraire routier avec l'API Google Maps V3

Ce tutoriel est basé sur le code de l'exemple intitulé :

Comment créer notre première carte à l'aide de l'API Google Maps Version 3 ?

Nous allons modifier ce code afin de calculer un itinéraire routier entre Tours et Loches.

Utilisation des classes DirectionsService DirectionsStatus DirectionsRenderer

DirectionsService

DirectionsRenderer moteur de rendu chargé d'afficher l'itinéraire

L'objet DirectionsRenderer est un moteur de rendu chargé de l'affichage du résultat du calcul d'un itinéraire. Celui-ci permet d'afficher l'itinéraire sous deux formes :

  • sous la forme d'une polyline, représentant le tracé de la route, venant se superposer à la carte désignée,

et/ou

  • sous la forme d'un raod book, série d'instructions textuelles placées dans une balise <div/> décrivant le parcours,.

Retrouvez ci-dessous les trois possibilités d'utilisation du moteur de rendu DirectionsRenderer :

DirectionsRenderer setMap setPanel : Afficher le descriptif de l'itinéraire et sa polyline sur une carte

Le code ci-dessous indique au moteur de rendu d'afficher le résultat du calcul d'itinéraire :

  • sur la carte nommée 'itineraireCarte' sous la forme d'une polyline,
  • ainsi que sa version texte (road book) dans une balise <div/> ayant pour identifiant 'itineraireTexte' :

/**
 * Création d'un moteur de rendu nommé 'itineraireAffichage'.
 */
var itineraireAffichage = new google.maps.DirectionsRenderer();

/**
 * Le moteur de rendu est chargé d'afficher l'itinéraire :
 *      - sur la carte nommée 'itineraireCarte' sous la forme d'une polyline.
 */
itineraireAffichage.setMap(itineraireCarte);

/**
 *      - sous forme de road book dans la balise <div/> ayant pour id 'itineraireTexte'.
 */
itineraireAffichage.setPanel(document.getElementById('itineraireTexte'));

Trois autres écritures possibles :

  • première en utilisant un objet DirectionsRendererOptions :
    var optionsAffichageItineraire = {
    	map: itineraireCarte,
    	panel: document.getElementById('itineraireTexte')
    }
    
    var itineraireAffichage = new google.maps.DirectionsRenderer(optionsAffichageItineraire);
    
  • seconde en utilisant la méthode set() de la classe MVCObject :
    var itineraireAffichage = new google.maps.DirectionsRenderer();
    itineraireAffichage.set('map',itineraireCarte);
    itineraireAffichage.set('panel',document.getElementById("EmplacementItineraireTexte"));
    
  • troisième en utilisant la méthode setValues() de la classe MVCObject :
    var optionsItineraireAffichage = {
    	map: itineraireCarte,
    	panel: document.getElementById("EmplacementItineraireTexte")
    }
    itineraireAffichage.setValues(optionsItineraireAffichage);
    

DirectionsRenderer setMap : Afficher l'itinéraire uniquement sous forme de polyline sur une carte

Le code ci-dessous indique au moteur de rendu d'afficher le résultat du calcul d'itinéraire uniquement sur la carte sous la forme d'une polyline :

/**
 * Création d'un moteur de rendu nommé 'itineraireAffichage'.
 */
var itineraireAffichage = new google.maps.DirectionsRenderer();

/**
 * Le moteur de rendu est chargé d'afficher l'itinéraire uniquement sur la carte nommée 'itineraireCarte' sous la forme d'une polyline.
 */
itineraireAffichage.setMap(itineraireCarte);

Trois autres écritures possibles :

  • première en utilisant un objet DirectionsRendererOptions :
    var optionsAffichageItineraire = {
    	map: itineraireCarte
    }
    var itineraireAffichage = new google.maps.DirectionsRenderer(optionsAffichageItineraire);
    
  • seconde en utilisant la méthode set() de la classe MVCObject :
    var itineraireAffichage = new google.maps.DirectionsRenderer();
    itineraireAffichage.set('map',itineraireCarte);
    
  • troisième en utilisant la méthode setValues() de la classe MVCObject :
    var optionsItineraireAffichage = {
    	map: itineraireCarte
    }
    itineraireAffichage.setValues(optionsItineraireAffichage);
    

DirectionsRenderer setPanel : Afficher uniquement le texte de l'itinéraire

Le code ci-dessous indique au moteur de rendu d'afficher le résultat du calcul d'itinéraire sous la forme d'un road book dans une balise <div/> ayant pour identifiant 'itineraireTexte' :

/**
 * Création d'un moteur de rendu nommé 'itineraireAffichage'.
 */
var itineraireAffichage = new google.maps.DirectionsRenderer();

/**
 * Le moteur de rendu est chargé d'afficher l'itinéraire sous forme
 * de road book dans la balise <div/> ayant pour id 'itineraireTexte'.
 */
itineraireAffichage.setPanel(document.getElementById('itineraireTexte'));

Trois autres écritures possibles :

  • première en utilisant un objet DirectionsRendererOptions :
    var optionsAffichageItineraire = {
    	panel: document.getElementById('itineraireTexte')
    }
    var itineraireAffichage = new google.maps.DirectionsRenderer(optionsAffichageItineraire);
    
  • seconde en utilisant la méthode set() de la classe MVCObject :
    var itineraireAffichage = new google.maps.DirectionsRenderer();
    itineraireAffichage.set('panel',document.getElementById("EmplacementItineraireTexte"));
    
  • troisième en utilisant la méthode setValues() de la classe MVCObject :
    var optionsItineraireAffichage = {
    	panel: document.getElementById("EmplacementItineraireTexte")
    }
    itineraireAffichage.setValues(optionsItineraireAffichage);
    

DirectionsService objet communiquant avec l'API Google Maps Directions

Le calcul d'un itinéraire, pouvant utiliser divers moyens de transports, se fait par l'intermédiaire d'un objet DirectionsService. Celui-ci va communiquer avec l'API Google Directions qui reçoit et analyse les requêtes, puis retourne le(s) itinéraire(s) calculé(s).

Créons un objet de type DirectionsService et nommons le itineraireService :

var itineraireService = new google.maps.DirectionsService();

DirectionsRequest objet contenant les paramètres nécessaires au calcul de l'itinéraire

Ensuite, il faut créer un objet littéral de type DirectionsRequest. Les informations (propriétés:valeurs) contenues dans cet objet servent à construire la requête qui sera envoyée à DirectionsService. Parmi elles, trois propriétés sont obligatoires :

Retrouvez ci-dessous trois exemples d'utilisation de l'objet littéral DirectionsRequest :

DirectionsRequest utilisant des adresses postales et DRIVING

Exemple d'objet DirectionsRequest nommé itineraireRequete pour calculer un itinéraire routier entre :

  • l'adresse postale de départ 'rue Nationale, Tours, FR',
  • et l'adresse postale d'arrivée 'rue Victor Hugo, Loches, FR'.
  • moyen de transport : automobile.

var itineraireRequete = {
	origin: "rue Nationale, Tours, FR",
	destination: "rue Victor Hugo, Loches, FR",
	travelMode: google.maps.TravelMode.DRIVING
}

DirectionsRequest utilisant des coordonnées GPS et WALKING

Exemple d'objet DirectionsRequest nommé itineraireRequete pour calculer un itinéraire pédestre entre :

  • le point de départ ayant pour coordonnées : Latitude:47.39028, Longitude: 0.688802,
  • et le point d'arrivée ayant pour coordonnées : Latitude:47.129172, Longitude: 0.998468.
  • moyen de transport : à pied.

var itineraireRequete = {
	origin: new google.maps.LatLng(47.39028,0.688802),
	destination: new google.maps.LatLng(47.129172,0.998468),
	travelMode: google.maps.TravelMode.WALKING
}

DirectionsRequest utilisant adresse postale et coordonnées GPS et BICYCLING

Exemple d'objet DirectionsRequest nommé itineraireRequete pour calculer un itinéraire à vélo entre :

  • l'adresse postale de départ 'rue Nationale, Tours, FR',
  • et le point d'arrivée ayant pour coordonnées : Latitude:47.129172, Longitude: 0.998468.
  • moyen de transport : à vélo.

var itineraireRequete = {
	origin: "rue Nationale, Tours, FR",
	destination: new google.maps.LatLng(47.129172,0.998468),
	travelMode: google.maps.TravelMode.BICYCLING
}

Envoyer la requête et analyser les informations contenues dans la réponse

Il ne reste plus qu'à envoyer la requête vers les serveurs de Google afin de calculer notre itinéraire. Pour cela, il suffit d'appeler la méthode route().

itineraireService.route( ... blablabla ... );

La méthode route() attend deux paramètres :

itineraireService.route(itineraireRequete, function(itineraireResultat, itineraireCodeStatut) {

	... blablabla ... 

});

Une fois la réponse littérale reçue, on vérifie que celle-ci contient un résultat valide en s'assurant que :
itineraireCodeStatut === google.maps.DirectionsStatus.OK.

Si c'est le cas, on demande au moteur de rendu nommé 'itineraireAffichage' de mettre à jour l'itinéraire avec les données reçues itineraireResultat.

Sinon, on affiche un message précisant la nature de l'échec.

itineraireService.route(itineraireRequete, function(itineraireResultat, itineraireCodeStatut) {
	if (itineraireCodeStatut === google.maps.DirectionsStatus.OK) {
		/** 
		 * Le moteur de rendu nommé 'itineraireAffichage' doit mettre à jour l'affichage de l'itinéraire avec les données contenues dans l'objet 'itineraireResultat'
		 */
		 itineraireAffichage.setDirections(itineraireResultat);
	}else{
		/**
		 * Sinon on affiche la raison de l'échec.
		 */
		alert('Erreur : ' + itineraireCodeStatut);
	}
});

Important :

Dans la ligne de code ci-dessous, on demande au moteur de rendu nommé itineraireAffichage d'utiliser le résultat itineraireResultat pour gérer l'affichage de l'itinéraire :

itineraireAffichage.setDirections(itineraireResultat);

Or l'objet DirectionsRenderer nommé itineraireAffichage, hérite de la classe MVCObject.

De ce fait, il détectera automatiquement tout changment dans ses propriétés et procédera immédiatement à la mise à jour de l'affichage de l'itinéraire ( carte et road book dans notre exemple ) lorsque l'itinéraire associé sera modifié.

Voici, au final, le code JavaScript utilisé pour calculer notre itinéraire routier :

/**
 * Options pour le moteur de rendu. Celui-ci sera chargé d'afficher l'itinéraire :
 *      - sur la carte nommée 'itineraireCarte' sous la forme d'une polyline.
 *      - ET sous forme de road book dans la balise <div/> ayant pour id 'EmplacementItineraireTexte'.
 */
var optionsItineraireAffichage = {
	map: itineraireCarte,
	panel: document.getElementById("EmplacementItineraireTexte")
}

/**
 * Création d'un moteur de rendu nommé 'itineraireAffichage'
 * auquel on applique les options 'optionsItineraireAffichage'.
 */
var itineraireAffichage = new google.maps.DirectionsRenderer(optionsItineraireAffichage);

/**
 * Création d'un objet de type DirectionsService nommé itineraireService
 */
var itineraireService = new google.maps.DirectionsService();

/**
 * Création d'un objet DirectionsRequest nommé 'itineraireRequete'
 * contenant toutes les informations indispensables 
 * à l'utilisation du service Directions (calculer un itinéraire).
 */
var itineraireRequete = {
	origin: "rue Nationale, Tours, FR",
	destination: "rue Victor Hugo, Loches, FR",
	travelMode: google.maps.TravelMode.DRIVING
}

/**
 * Envoie la requête vers les serveurs Google afin de calculer un itinéraire (Asynchrone) en lui passant :
 * - notre objet nommé 'itineraireRequete' précédemment créé,
 * - une méthode de rappel à exécuter dès la réception de la réponse.
 */
itineraireService.route(itineraireRequete, function(itineraireResultat, itineraireCodeStatut) {
	/**
	 * Code à executer une fois la réponse littérale reçue.
	 * On commence toujours par s'assurer que la requête a retourné une réponse valide en vérifiant que itineraireCodeStatut === google.maps.DirectionsStatus.OK
	 */
	if (itineraireCodeStatut === google.maps.DirectionsStatus.OK) {
		/**
		 * Puis on effectue le traitement désiré sur la réponse obtenue.
		 * Ici on demande au moteur de rendu 'itineraireAffichage' de mettre à jour l'affichage de l'itinéraire avec les données contenues dans l'objet 'itineraireResultat'
		 */
		 itineraireAffichage.setDirections(itineraireResultat);
	}else{
		/**
		 * Sinon on affiche la raison de l'échec.
		 */
		alert('Erreur : ' + itineraireCodeStatut);
	}
});

DirectionsService exemple complet

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Titre de votre page</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementItineraireCarte, #EmplacementItineraireTexte {
				height: 50%
			}
		</style>
	</head>
	<body>
		<div id="EmplacementItineraireCarte"></div>
		<div id="EmplacementItineraireTexte"></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 ne soit 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>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var itineraireCarte = new google.maps.Map(document.getElementById("EmplacementItineraireCarte"), optionsCarte);
				/**
				 * Moteur de rendu
				 */
				var optionsItineraireAffichage = {
					map: itineraireCarte,
					panel: document.getElementById("EmplacementItineraireTexte")
				}
				var itineraireAffichage = new google.maps.DirectionsRenderer(optionsItineraireAffichage);
				/**
				 * Service itinéraire
				 */
				var itineraireService = new google.maps.DirectionsService();
				/**
				 * Objet littéral
				 */
				 var itineraireRequete = {
					origin: "rue Nationale, Tours, FR",
					destination: "rue Victor Hugo, Loches, FR",
					travelMode: google.maps.TravelMode.DRIVING
				}
				/**
				 * Envoie la requête vers les serveurs Google (Asynchrone)
				 */
				itineraireService.route(itineraireRequete, function(itineraireResultat, itineraireCodeStatut) {

					/**
					 * Si le résultat est valide on demande au moteur de rendu d'utiliser ce résultat pour mettre à jour l'affichage de l'itinéraire ( carte + roadbook)
					 */
					if (itineraireCodeStatut === google.maps.DirectionsStatus.OK) {
						 itineraireAffichage.setDirections(itineraireResultat);

					/**
					 * Sinon on affiche le code erreur
					 */
					}else{
						alert('Erreur : ' + itineraireCodeStatut);
					}

				});
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>
	</body>
</html>

Calculer un itinéraire : carte et road book