API Google Maps Partie 3 : calcul d’itinéraire
Publié le par Dans un précédent article, nous avons exploité l’API Geolocation et l’API Google Maps pour lister des lieux dans une zone géographique. Dans cet article, nous allons reprendre cet exemple et allons l’étoffer encore un peu, en calculant l’itinéraire entre la position de l’utilisateur et celle d’un lieu, et en affichant les étapes de l’itinéraire.
Tournez à gauche !
Pour ce qui va suivre, nous allons nous baser sur l’exemple de la partie 2, et nous allons le modifier pour afficher l’itinéraire entre deux repères : celui correspondant à la position de l’utilisateur et celui d’un lieu. L’itinéraire sera affiché au clic sur un repère. Comme l’API Google Maps nous le permet, nous afficherons également dans le coin supérieur droit de la page, la liste des étapes de l’itinéraire.
Dans la feuille de style défini en haut de la page, ajoutons la règle suivante :
#steps {
width: 280px;
height: 400px;
position: absolute;
right: 24px;
top: 24px;
background-color: #FFFFFF;
border-radius: 8px;
box-shadow: 0 0 16px #C0C0C0;
padding: 10px;
overflow: auto;
}
Puis dans notre <body>, nous allons rajouter une div qui va contenir les étapes de l’itinéraire :
<div id="steps" style="display: none;"></div>
En haut de notre script, nous allons commencer par rajouter une variable nommée objDirection, qui nous servira ici à définir un itinéraire sur la carte :
var objLocation, objMaps, objCurrentLocationMarker, objInfoWindow, objService, objDirection;
Nous ajouterons ensuite le code suivant dans le bloc if juste après l’appel à new google.maps.PlacesService() :
objDirection = new google.maps.DirectionsRenderer({
map: objMaps,
panel: document.getElementById("steps")
});
Dans ce code, nous faisons appel à la fonction DirectionsRenderer(), qui s’occupe du rendu de l’itinéraire sur la carte, avec les étapes qui seront affichées dans la div.
Il ne nous reste plus qu’à gérer l’affichage de cet itinéraire sur la carte. Pour cela, nous allons remplacer le code de la fonction associé à l’évènement click sur un repère par celui-ci :
google.maps.event.addListener(objMarker, 'click', function() {
document.getElementById("steps").style.display = 'block';
var objDirectionService = new google.maps.DirectionsService();
objDirectionService.route({
origin: objLocation,
destination: objPlace.geometry.location,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(response, status) {
if (google.maps.DirectionsStatus.OK) {
objDirection.setDirections(response);
}
});
});
Dans ce code, nous faisons appel à la fonction route() en passant en paramètre un objet contenant trois propriétés, ainsi qu’une fonction de callback :
- origin : le point de départ (ici, la position de l’utilisateur);
- destination : le point d’arrivée (ici, la position du repère qui a été cliqué);
- travelMode : le mode de déplacement (ici, par la route).
Pour information, les modes de déplacements disponibles sont les suivants :
- google.maps.DirectionsTravelMode.DRIVING : en voiture;
- google.maps.DirectionsTravelMode.BICYCLING : à vélo;
- google.maps.DirectionsTravelMode.WALKING : à pied;
- google.maps.DirectionsTravelMode.TRANSIT : via les transports en commun.
Quand l’itinéraire est calculé, la fonction définie en callback est appelée. Dans cette fonction, nous appelons la fonction setDirections() qui affiche l’itinéraire sur la carte et les étapes dans le coin supérieur droit de la page.
Lancez cet exemple dans votre navigateur et cliquez sur un des repères violets présents autour de votre position. Vous obtiendrez par exemple ceci :
Vous pouvez également voir les autres modes de déplacement. En fonction de la commune où vous habitez, certains modes ne fonctionneront peut-être pas.
Vous êtes arrivé !
C’est ici que s’achève notre série d’articles sur l’API Google Maps. A travers cette série, nous avons vu les bases de cette API à travers des exemples simples. Si vous souhaitez parcourir de fond en comble les fonctions disponibles par l’API, vous pouvez visiter la page de l’API JavaScript Google Maps sur le site Google Developers.