page-translate

Google Maps Directions : Afficher des itinéraires et des trajets

api v3 / directions / google maps / itinéraire / latitude longitude / trajet

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

S'il y a bien une chose qui est appréciable avec Google c'est que plus on utilise les APIs et services que leurs équipes mettent à disposition et plus on se rend compte du florilège d'outils qu'ils nous permettent d'utiliser pour enrichir les fonctionnalités de son site Web.

Avec Google Maps Directions (compatible avec la Google Maps API V3), nous allons voir comment créer une carte interactive pour présenter le trajet entre deux points.

Définir votre point de départ et votre point d'arrivée

La première étape est de connaître votre point de départ et votre point d'arrivée. Il faudra les exprimer en objet LatLng. Souvent le point de départ correspond aux coordonnées GPS de l'IP de l'internaute alors que le point d'arrivée correspond aux latitudes et longitudes de l'entreprise. La position actuelle peut être identifié par plusieurs moyens. Le plus logique serait d'utiliser l'API Google Maps en indiquant sensor=true au moment de l'import du javascript de l'api. Cependant, pour éviter les indisponibilités de services que rencontre parfois ce gadget, il vaut mieux faire appel à un service de géolocalisation par l'ip comme fournit le site http://www.geoplugin.net.

Pour connaître la latitude et longitude de votre point d'arrivée, je vous conseille de vous inspirer d'un article précédent comme "Obtenir une latitude et longitude en faisant un appel Curl de l'api Google Maps". N'oubliez pas de stocker en base vos résultats pour éviter d'atteindre trop vite les quotas qu'impose Google.

Afficher le trajet sur la carte

L'affichage du trajet ressemble à un appel de carte classique à quelques différences prêt. Voici les lignes à rajouter après la création de votre objet Google Maps classique :

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

Avec ces deux instructions vous instanciez un objet graphique de type itinéraire mais vous ne lui indiquez pas encore le trajet à tracer.

Une fonction peut venir accueillir ces paramètres comme suit :

function calcRoute() {
   current_pos = new google.maps.LatLng(40.4,-78);
   end_pos = new google.maps.LatLng(42.356,-78.5794);
   var request = {
      origin:current_pos,
      destination:end_pos,
      travelMode: google.maps.TravelMode.DRIVING
   };
   directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(result);
      }
   });
}

Vous noterez que la variable request contient les paramètres les plus intéressants. La propriété travelMode précise le type de transport qui doit être privilégié (DRIVING est donc particulièrement souvent utilisé). Il vous reste enfin à appeler la fonction calcRoute() après la fonction initialize().

Afficher une liste d'instructions à suivre

Pour afficher une liste d'instructions des directions et routes à prendre pour arriver à bon port, une simple ligne d'instruction suffit :
directionsDisplay.setPanel(document.getElementById("map-panel"));

Cela suppose bien sûr d'avoir crée au préalable une div avec un id="map-panel" pour afficher les éléments associés.

Cerise sur l'API : redéfinir les points de départ et d'arrivée

Comme vous pourrez le constater en mettant en place ce script, la localisation par IP est souvent approximative puisqu'elle fait appel à l'infrastructure de votre FAI (ISP).
Une excellente solution est de rendre déplacable les markers de votre trajet. Une option va nous permettre de déplacer en "Drag'n Drop" les marqueurs de départ et d'arrivée :
directionsDisplay = new google.maps.DirectionsRenderer({draggable:true});

Vous devriez maintenant avoir une carte interactive complète. N'hésitez pas à faire un tour du coté de la page de documentation détaillée de l'api Google Directions pour en apprendre plus sur les nombreuses options disponibles.

Commentaires

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles