Créer un planificateur d'itinéraire avec Place Autocomplete et l'API Routes

1. Présentation

Que vous partiez en road trip, que vous planifiiez votre trajet quotidien ou que vous vous déplaciez dans une ville animée, il ne suffit pas de savoir où vous voulez aller pour vous rendre d'un point A à un point B. Un outil fiable de génération d'itinéraires est essentiel.

Google Maps Platform vous permet d'ajouter une carte dynamique à votre application, de laisser les utilisateurs saisir rapidement des lieux grâce à la saisie semi-automatique et d'afficher des itinéraires sur la carte.

Cet atelier de programmation guide les développeurs dans la création d'une application Web à l'aide de l'API Maps JavaScript, de Place Autocomplete et de l'API Routes. Vous apprendrez à intégrer plusieurs API Google Maps Platform grâce à un tutoriel personnalisable.

Ce que vous allez faire

Cet atelier de programmation vous guidera dans la création d'une application Web à l'aide de HTML, CSS, JavaScript et d'un backend Node.js.

Architecture de l'application Web de planification d'itinéraires

Application Web de planification d'itinéraires

Points abordés

  • Activer les API Google Maps Platform
  • Intégrer une carte dynamique à une application Web
  • Intégrer le service Places Autocomplete
  • Demander un itinéraire avec l'API Routes
  • Afficher l'itinéraire sur une carte dynamique
  • Créer un ID de carte
  • Ajouter des repères avancés à une carte dynamique

Prérequis

Exemple de code

La solution complète et le code pas à pas sont disponibles sur GitHub. Le code n'inclut pas les packages Node requis. Installez les dépendances nécessaires avant d'exécuter le code. Vous trouverez des informations sur les packages requis dans le fichier package.json(expliqué à l'étape 3).

2. Configurer un projet et activer les API

Pour l'étape d'activation, vous devrez activer l'API Maps JavaScript, Place Autocomplete et l'API Routes.

Configurer Google Maps Platform

Si vous ne disposez pas encore d'un compte Google Cloud Platform et d'un projet pour lequel la facturation est activée, consultez le guide Premiers pas avec Google Maps Platform pour savoir comment créer un compte de facturation et un projet.

  1. Dans la console Cloud, cliquez sur le menu déroulant des projets, puis sélectionnez celui que vous souhaitez utiliser pour cet atelier de programmation. Sélectionner un projet
  2. Activez les API Google Maps Platform requises pour cet atelier de programmation sur la page Bibliothèque d'API Maps. Pour ce faire, suivez les étapes indiquées dans cette vidéo ou cette documentation.
  3. Générez une clé API sur la page Identifiants de Cloud Console. Vous pouvez suivre la procédure décrite dans cette vidéo ou dans cette documentation. Toutes les requêtes envoyées à Google Maps Platform nécessitent une clé API.

3. Configurer un projet Node.js

Dans cet atelier, nous allons utiliser Node.js pour collecter l'origine et la destination sur le Web, puis demander l'itinéraire via l'API Routes.

En partant du principe que vous avez déjà installé Node.js, créez un répertoire que vous utiliserez pour exécuter ce projet :

$ mkdir ac_routes
$ cd ac_routes

Initialisez un package Node.js dans le répertoire de votre application :

$ npm init

Cette commande vous invite à fournir un certain nombre d'informations, comme le nom et la version de votre application. Pour l'instant, vous pouvez simplement appuyer sur RETOUR pour accepter les valeurs par défaut pour la plupart d'entre eux. Le point d'entrée par défaut est index.js. Vous pouvez le remplacer par votre fichier principal. Dans cet atelier, le fichier principal est function/server.js(pour en savoir plus, consultez l'étape 6).

N'hésitez pas non plus à installer le framework et les modules de votre choix. Cet atelier utilise le framework Web(Express) et le body parser(body-parser). Pour en savoir plus, consultez le fichier package.json.

4. Créer une carte dynamique

Maintenant que notre backend Node.js est en place, explorons les étapes nécessaires pour le côté client.

  • Créer une page HTML pour l'application
  • Créer un fichier CSS pour la mise en forme
  • Charger l'API Google Maps JavaScript dans la page HTML
  • Collez votre clé API dans la balise de script pour authentifier votre application.
  • Créer un fichier JavaScript pour gérer la fonctionnalité de l'application

Créer une page HTML

  1. Créez un répertoire dans le dossier de votre projet(ac_routes dans ce cas).
     $ mkdir public
 $ cd public
  2. Dans le répertoire public, créez index.html.
  3. Copiez le code suivant dans index.html
     <!DOCTYPE html>
 <html>
 <head>
   <title>GMP Autocomplete + Routes</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
   <div class="container">
     <!-- Start of the container for map -->
     <div class="main">
       <div id="map"></div>
     </div>
     <!-- End of the container for map -->
   </div>
   </body>
 </html>

Créer un fichier CSS

  1. Créez style.css dans le répertoire public
  2. Copiez le code suivant dans style.css :
     html, body {height: 100%;}
 body {
   background: #fff;
   font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size:16px;
   line-height: 1.5;
   margin: 0;
   padding: 0;
 }
 .container {display:flex; width:90%; padding:100px 0; margin:0 auto;}
 .main {width:70%; height:800px;}
  #map {height:100%; border-radius:20px;}

Charger l'API Maps JavaScript

Dans cet atelier, nous utiliserons l'importation dynamique de bibliothèque pour charger l'API Maps JavaScript. En savoir plus

Dans index.html, copiez le code suivant avant la balise de fermeture du corps. Remplacez "YOUR_API_KEY" par votre propre clé API.

<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({key: "YOUR_API_KEY", v: "weekly"});</script>

Créer un fichier JavaScript

  1. Dans le répertoire public, créez app.js.
  2. Copiez le code suivant dans app.js.
     (function(){
   let map;

   async function initMap() {
       const { Map } = await google.maps.importLibrary('maps');
       map = new Map(document.getElementById('map'), {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           mapId: 'DEMO_MAP_ID'
       });
   }

   initMap();
 }());

DEMO_MAP_ID est un ID qui peut être utilisé pour les exemples de code nécessitant un ID de carte. Cet ID n'est pas destiné à être utilisé dans des applications de production et ne peut pas être utilisé pour les fonctionnalités qui nécessitent un style cloud. Dans cet atelier, vous aurez besoin d'un ID de carte pour les repères avancés à une étape ultérieure. Pour en savoir plus sur la création d'un ID de carte pour votre application,

Dans index.html, associez app.js avant la balise de fermeture du corps et après la balise de script de chargement de l'API Maps JavaScript.

<script type="text/JavaScript" src="app.js"></script>

Exemple de code complet

Le code complet jusqu'à présent est disponible sur GitHub : step1_createDynamicMap.

5. Saisir les adresses de départ et de destination

  • Ajoutez deux champs de texte dans index.html pour saisir l'origine et la destination.
  • Importer la bibliothèque Autocomplete
  • Associer le service Autocomplete aux champs de texte d'origine et de destination

Ajouter des champs de texte

Dans index.html, ajoutez le code suivant en tant que premier enfant de div avec la classe container.

<div class="aside">
  <div class="inputgroup">
    <label for="origin">Start</label>
    <input type="text" id="origin" name="origin" class="input-location" placeholder="Enter an address">
  </div>
  <div class="inputgroup">
    <label for="origin">End</label>
    <input type="text" id="destination" name="destination" class="input-location" placeholder="Enter an address">
  </div>
</div>

Importer et activer la saisie semi-automatique

La classe google.maps.places.Autocomplete est un widget qui fournit des prédictions de lieux en fonction de la saisie de texte d'un utilisateur. Il s'associe à un élément d'entrée de type texte et écoute les saisies de texte dans ce champ. La liste des prédictions s'affiche sous forme de liste déroulante et est mise à jour à mesure que du texte est saisi.

Dans app.js, ajoutez le code suivant après l'initialisation de la carte :

let placeIds = [];
async function initPlace() {
  const { Autocomplete } = await google.maps.importLibrary('places');
  let autocomplete = [];
  let locationFields = Array.from(document.getElementsByClassName('input-location'));
  //Enable autocomplete for input fields
  locationFields.forEach((elem,i) => {
      autocomplete[i] = new Autocomplete(elem);
      google.maps.event.addListener(autocomplete[i],"place_changed", () => {
          let place = autocomplete[i].getPlace();
          if(Object.keys(place).length > 0){
              if (place.place_id){
                  placeIds[i] = place.place_id; //We use Place Id in this example
              } else {
                  placeIds.splice(i,1); //If no place is selected or no place is found, remove the previous value from the placeIds.
                  window.alert(`No details available for input: ${place.name}`);
                  return;
              }
          }
      });
  });
}
initPlace();

Une fois qu'un utilisateur a sélectionné un lieu dans la liste de prédictions de saisie semi-automatique, il est possible de récupérer les détails du résultat du lieu à l'aide de la méthode getPlace(). Le résultat d'un lieu contient de nombreuses informations sur un lieu. Dans cet atelier, nous allons utiliser place_id pour identifier le lieu sélectionné. Les ID de lieu identifient de façon unique un lieu dans la base de données Google Places et sur Google Maps. En savoir plus sur les ID de lieu

Ajouter des styles pertinents

Dans style.css, ajoutez le code suivant :

.aside {width:30%; padding:20px;}
.inputgroup {margin-bottom:30px;}
.aside label {display:block; padding:0 10px; margin-bottom:10px; font-size:18px; color:#666565;}
.aside input[type=text] {width:90%;padding:10px; font-size:16px; border:1px solid #e6e8e6; border-radius:10px;}

Exemple de code complet

Le code complet jusqu'à présent est disponible sur GitHub : step2_inputAddress.

6. Demander l'itinéraire

  • Ajoutez un bouton "Obtenir un itinéraire" à index.html pour lancer la demande d'itinéraire.
  • Ce bouton déclenche l'envoi des données d'origine et de destination au service Node.js.
  • Le service Node.js envoie une requête à l'API Routes.
  • La réponse de l'API est renvoyée côté client pour être affichée.

Maintenant que l'origine et la destination sont définies et qu'une carte dynamique est prête, il est temps d'obtenir l'itinéraire. L'API Routes, la version nouvelle génération optimisée pour les performances du service Directions et Distance Matrix, est là pour vous aider. Dans cet atelier, nous allons utiliser Node.js pour collecter l'origine et la destination sur le Web, puis demander l'itinéraire via l'API Routes.

Dans index.html, ajoutez un bouton "Obtenir un itinéraire" avant la balise de fermeture de div avec la classe aside :

<div class="inputgroup">
  <button id="btn-getroute">Get a route</button>
</div>

Dans style.css, ajoutez la ligne suivante :

.aside button {padding:20px 30px; font-size:16px; border:none; border-radius:50px; background-color:#1a73e8; color:#fff;}

Dans app.js, ajoutez le code ci-dessous pour envoyer les données d'origine et de destination au service Node.js :

function requestRoute(){
  let btn = document.getElementById('btn-getroute');
  btn.addEventListener('click', () => {
    //In this example, we will extract the Place IDs from the Autocomplete response
    //and use the Place ID for origin and destination
    if(placeIds.length == 2){
        let reqBody = {
            "origin": {
                "placeId": placeIds[0]
            },
            "destination": {
                "placeId": placeIds[1]
            }
        }

        fetch("/request-route", {
            method: 'POST',
            body: JSON.stringify(reqBody),
            headers: {
                "Content-Type": "application/json"
            }
        }).then((response) => {
            return response.json();
        }).then((data) => {
            //Draw the route on the map
            //Details will be covered in next step
            renderRoutes(data);
        }).catch((error) => {
            console.log(error);
        });
    } else {
        window.alert('Location must be set');
        return;
    }
  });
}

requestRoute();

renderRoutes() est la fonction que nous utiliserons pour dessiner l'itinéraire sur la carte. Nous aborderons les détails à l'étape suivante.

Créer le serveur

Dans le répertoire du projet(ac_routes dans ce cas), créez un dossier nommé "function". Dans ce dossier, créez un fichier nommé server.js. Ce fichier sert de point d'entrée pour votre projet, qui est configuré lors de la configuration de votre projet Node.js. Il gère trois fonctions clés :

  1. Collecter des données à partir du client Web
  2. Envoyer des requêtes à l'API Routes
  3. Renvoi de la réponse de l'API au côté client

Copiez le code suivant dans server.js. Remplacez "YOUR_API_KEY" par votre propre clé API. Pour renforcer la sécurité des clés API, nous vous conseillons vivement d'utiliser une clé distincte pour le backend. Consultez les Conseils de sécurité.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

const port  = 8080;
const urlencodedParser = bodyParser.urlencoded({extended:true}); 

function main() {
  app.use('/', express.static('public'));
  app.use(urlencodedParser);
  app.use(express.json());

  app.post('/request-route', (req,res) => {    
    fetch("https://routes.googleapis.com/directions/v2:computeRoutes", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Goog-Api-Key": "YOUR_API_KEY",
        "X-Goog-FieldMask": "*"
      },
      body: JSON.stringify(req.body)
    }).then((response) => {
      return response.json();
    }).then((data) => {
      if('error' in data){
        console.log(data.error);
      } else if(!data.hasOwnProperty("routes")){
        console.log("No route round");
      } else {
        res.end(JSON.stringify(data));
      }
    }).catch((error) => {
      console.log(error)
    });
  });

  app.listen(port, () => {
      console.log('App listening on port ${port}: ' + port);
      console.log('Press Ctrl+C to quit.');
  });
}

main();

Pour en savoir plus sur l'API Routes, consultez Obtenir un itinéraire avec l'API Routes.

Exécuter le code

Exécutez le code ci-dessous dans la ligne de commande :

$ node function/server.js

Ouvrez le navigateur et accédez à http://127.0.0.1:8080/index.html. La page de l'application devrait s'afficher. Jusqu'à cette étape, la réponse de l'API est renvoyée au client Web. À l'étape suivante, nous verrons comment afficher l'itinéraire sur la carte.

Exemple de code complet

Le code complet jusqu'à présent est disponible sur GitHub : step3_requestRoute.

7. Afficher l'itinéraire sur la carte

À l'étape précédente, nous faisons référence à renderRoutes() lorsque nous recevons la réponse du service Node.js. Ajoutons maintenant le code permettant d'afficher l'itinéraire sur la carte.

Dans app.js, ajoutez le code ci-dessous :

let paths = [];
async function renderRoutes(data) {
  const { encoding } = await google.maps.importLibrary("geometry");
  let routes = data.routes;
  let decodedPaths = [];

  ///Display routes and markers
  routes.forEach((route,i) => {
      if(route.hasOwnProperty('polyline')){
        //Decode the encoded polyline
        decodedPaths.push(encoding.decodePath(route.polyline.encodedPolyline));

        //Draw polyline on the map
        for(let i = decodedPaths.length - 1; i >= 0; i--){
            let polyline = new google.maps.Polyline({
                map: map,
                path: decodedPaths[i],
                strokeColor: "#4285f4",
                strokeOpacity: 1,
                strokeWeight: 5
            });
            paths.push(polyline);
        }
        
        //Add markers for origin/destination
        addMarker(route.legs[0].startLocation.latLng,"A");
        addMarker(route.legs[0].endLocation.latLng,"B");
        //Set the viewport
        setViewport(route.viewport);
      } else {
        console.log("Route cannot be found");
      }
  });
}

L'API Routes renvoie une polyline au format encodedPolyline(par défaut) ou geoJsonLinestring. Dans cet atelier, nous utilisons le format encodedPolyline et le décodons à l'aide de la bibliothèque de géométrie Maps JavaScript.

Nous utiliserons addMarker() pour ajouter des repères avancés pour l'origine et la destination. Dans app.js, ajoutez le code suivant :

let markers = [];
async function addMarker(pos,label){
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const { PinElement } = await google.maps.importLibrary("marker");
  const { LatLng } = await google.maps.importLibrary("core");
  let pinGlyph = new PinElement({
      glyphColor: "#fff",
      glyph: label
  });
  let marker = new AdvancedMarkerElement({
      position: new LatLng({lat:pos.latitude,lng:pos.longitude}),
      gmpDraggable: false,
      content: pinGlyph.element,
      map: map
  });
  markers.push(marker);
}

Ici, nous créons deux repères avancés : A pour l'origine et B pour la destination. En savoir plus sur les repères avancés

Ensuite, nous allons centrer la fenêtre d'affichage de la carte sur l'itinéraire récupéré, en utilisant les informations pratiques sur la fenêtre d'affichage fournies par l'API Routes. Dans app.js, ajoutez le code suivant :

async function setViewport(viewPort) {
  const { LatLng } = await google.maps.importLibrary("core");
  const { LatLngBounds } = await google.maps.importLibrary("core");
  let sw = new LatLng({lat:viewPort.low.latitude,lng:viewPort.low.longitude});
  let ne = new LatLng({lat:viewPort.high.latitude,lng:viewPort.high.longitude});
  map.fitBounds(new LatLngBounds(sw,ne));
}

Exemple de code complet Le code complet jusqu'à présent est disponible sur GitHub : step4_displayRoute.

8. Supprimer des éléments de la carte

Nous souhaitons aller plus loin. Effaçons la carte avant de dessiner de nouveaux repères et itinéraires pour éviter l'encombrement.

Dans app.js, ajoutons une autre fonction :

function clearUIElem(obj,type) {
  if(obj.length > 0){
      if(type == 'advMarker'){
          obj.forEach(function(item){
              item.map = null;
          });
      } else {
          obj.forEach(function(item){
              item.setMap(null);
          });
      }
  }
}

Ajoutez la ligne suivante au début de renderRoutes() :

clearUIElem(paths,'polyline');

Ajoutez la ligne suivante au début de addMarker() :

clearUIElem(markers,'advMarker');

Exemple de code complet

Le code complet jusqu'à présent est disponible sur GitHub : step5_removeElements.

9. Félicitations

Vous avez réussi à créer l'objet.

Ce que vous avez appris

  • Activer les API Google Maps Platform
  • Charger l'API Google Maps JavaScript dans la page HTML
  • Importer la bibliothèque Places, API Maps JavaScript
  • Associer le service Place Autocomplete aux champs de texte
  • Demander un itinéraire via l'API Routes
  • Afficher l'itinéraire sur une carte dynamique
  • Créer un ID de carte
  • Créer des repères avancés

En savoir plus

Quels autres ateliers de programmation souhaiteriez-vous voir ?

Visualisation des données sur les cartes En savoir plus sur la personnalisation du style de mes cartes Concevoir des interactions 3D dans Google Maps

L'atelier de programmation que vous souhaitez suivre ne figure pas dans la liste ci-dessus ? Demandez-le en décrivant un nouveau problème ici.