12. Calculer un itinéraire

Ecrit par fabien le 7/09/2008.

| |

Sommaire

Introduction
Initialisation
Calcul de l'itinéraire
Code complet
Démonstration
Remarques
Conclusion

Introduction

De la même manière que le géocodage à l'adresse, l'API Google Maps permet de calculer un itinéraire en utilisant la classe GDirections.

Initialisation

Reprendre la carte du tutoriel n°2.

Calcul de l'itinéraire

Définir la fonction setDirections(fromAddress, toAddress) qui calcule l'itinéraire entre deux adresses :

function setDirections(fromAddress, toAddress) {
  gdir.load("from: " + fromAddress + " to: " + toAddress,{ "locale": "fr" });
}

Définir un objet GDirections :

gdir = new GDirections(map);

Calculer un itinéraire lors de l'appel de la carte :

setDirections("Allée Machado, Toulouse, fr", "Avenue de l'agrobiopole, Auzeville-Tolosane, fr", "fr");
<code>
Et éditer le formulaire en HTML :
<code>
<form action="#" onsubmit="setDirections(this.from.value, this.to.value); return false">
  <table id="iti">
    <tr>
      <td><input type="image" style="vertical-align:middle;"src="./buttons/de_orange_75.png" onclick="document.form.submit();"/></td>
      <td><input type="text" size="30" id="fromAddress" name="from" value="Allée Machado, Toulouse, fr"/></td>
    </tr>
    <tr>
      <td><input type="image" style="vertical-align:middle;"src="./buttons/a_orange_75.png" onclick="document.form.submit();"/></td>
      <td><input type="text" size="30" id="toAddress" name="to" value="Avenue de l'agrobiopole, Auzeville-Tolosane, fr"/></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="image" style="vertical-align:middle;"src="./buttons/go_orange_75.png" onclick="document.form.submit();"/></td>
    </tr>
  <table>
</form>

Code complet

<!DOCTYPE html "-//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">
  <head>
    <title>
     [Google Maps] 12. Calculer un itinéraire
   </title>
   <style type="text/css">
     html { overflow:hidden; height:100%; } 
     body { height:100%; margin:0; }
     #map { width:100%; height:100%; }
   </style>
   <link rel="icon" type="image/png" href="./favicon.png"/>
   <script src="http://maps.google.com/maps?file=api&v=2&key=votre_clé_ici" type="text/javascript"></script>
   <script type="text/javascript">
 
     var map = null;
     var gdir;
 
     function setDirections(fromAddress, toAddress) {
       gdir.load("from: " + fromAddress + " to: " + toAddress,{ "locale": "fr" });
     }
 
     function initialize() {
       if (GBrowserIsCompatible()) {
       map = new GMap2(document.getElementById('map'));
       map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);
       map.addControl(new GMapTypeControl());
       map.removeMapType(G_HYBRID_MAP);
       map.addMapType(G_PHYSICAL_MAP);
       map.setMapType(G_PHYSICAL_MAP);
       map.addControl(new GOverviewMapControl());
       map.addControl(new GScaleControl());
       map.addControl(new GLargeMapControl());
       map.enableScrollWheelZoom();
 
       geocoder = new GClientGeocoder();
 
       gdir = new GDirections(map);
       setDirections("Allée Machado, Toulouse, fr", "Avenue de l'agrobiopole, Auzeville-Tolosane, fr", "fr");
 
       var iti = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(60, 10));
       iti.apply(document.getElementById("iti"));
       map.getContainer().appendChild(document.getElementById("iti"));
 
      }
      else{
       alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
      }
    }
  </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="setDirections(this.from.value, this.to.value); return false">
      <table id="iti">
        <tr>
          <td><input type="image" style="vertical-align:middle;"src="./buttons/de_orange_75.png" onclick="document.form.submit();"/></td>
          <td><input type="text" size="30" id="fromAddress" name="from" value="Allée Machado, Toulouse, fr"/></td>
        </tr>
        <tr>
          <td><input type="image" style="vertical-align:middle;"src="./buttons/a_orange_75.png" onclick="document.form.submit();"/></td>
          <td><input type="text" size="30" id="toAddress" name="to" value="Avenue de l'agrobiopole, Auzeville-Tolosane, fr"/></td>
        </tr>
        <tr>
          <td colspan="2" align="center"><input type="image" style="vertical-align:middle;"src="./buttons/go_orange_75.png" onclick="document.form.submit();"/></td>
        </tr>
     <table>
    </form>
    <div id="map"></div>
   </body>
</html>

Démonstration

Résultat pleine page
Evidemment le résultat est plus joli en pleine page :-)

Remarques

Toujours se référer à l'API Google Maps - Google Maps API Reference pour les différentes classes, méthodes et options utilisées.
Le nombre de requêtes est limité à 15000 par jour et par adresse IP (idem que le géocodage).
Il est possible d'afficher l'itinéraire sous forme de texte en définissant un panel dans le constructeur GDirections.

Conclusion

De la même manière que le géocodage, le calcul d'un itinéraire se fait de façon très simple grâce à l'API Google Maps.
L'affichage de l'itinéraire ainsi que le niveau de zoom approprié est fait de façon automatique par la méthode load() de la classe GDirections.

Auteur : Fabien - fabien.goblet [ at ] gmail.com

Retour en haut

Bonjour, Est il possible de

Par Berti (non vérifié), le lun, 26/07/2010 - 10:59am.

Bonjour,

Est il possible de récupérer l'adresse automatiquement( gps ou antenne gsm) ou si l'utilisateur loggé a renseigné son adresse dans ses préférences.

Peut-on inscrire une adresse de destination fixe?

répondre

GeoTribu