Crea un pianificatore di itinerari con il completamento automatico dei luoghi e l'API Routes

1. Panoramica

Che tu stia per intraprendere un viaggio on the road, pianificando il tuo tragitto giornaliero o esplorando una città frenetica, arrivare dal punto A al punto B non significa solo sapere dove vuoi andare. Uno strumento di generazione di itinerari affidabile è essenziale.

Con Google Maps Platform, puoi aggiungere una mappa dinamica alla tua applicazione, consentire agli utenti di inserire rapidamente le località con il completamento automatico e visualizzare i percorsi sulla mappa.

Questo Codelab guida gli sviluppatori nella creazione di un'applicazione web utilizzando l'API Maps JavaScript, Place Autocomplete e l'API Routes. Imparerai a integrare più API Google Maps Platform tramite un tutorial personalizzabile.

Cosa creerai

Questo codelab ti guiderà nella creazione di un'applicazione web utilizzando HTML, CSS, JavaScript e un backend Node.js.

Architettura dell'app web Organizzazione di percorsi

App web Organizzazione di percorsi

Obiettivi didattici

  • Come abilitare le API di Google Maps Platform
  • Come integrare una mappa dinamica in un'applicazione web
  • Come integrare il servizio Place Autocomplete
  • Come richiedere un percorso tramite l'API Routes
  • Come visualizzare l'itinerario su una mappa dinamica
  • Come creare un ID mappa
  • Come aggiungere indicatori avanzati a una mappa dinamica

Che cosa ti serve

Codice di esempio

La soluzione completa e il codice passo passo sono disponibili su GitHub. Il codice non include i pacchetti Node richiesti. Installa le dipendenze necessarie prima di eseguire il codice. I dettagli dei pacchetti richiesti sono disponibili nel file package.json(spiegato nel passaggio 3).

2. Configura il progetto e abilita le API

Per il passaggio di attivazione, devi abilitare l'API Maps JavaScript, Place Autocomplete e l'API Routes.

Configurare Google Maps Platform

Se non hai ancora un account Google Cloud Platform e un progetto con la fatturazione abilitata, consulta la guida Guida introduttiva a Google Maps Platform per creare un account di fatturazione e un progetto.

  1. Nella console Cloud, fai clic sul menu a discesa del progetto e seleziona il progetto che vuoi utilizzare per questo codelab. Seleziona progetto
  2. Abilita le API di Google Maps Platform richieste per questo codelab nella pagina Libreria API Maps. Per farlo, segui i passaggi descritti in questo video o in questa documentazione.
  3. Genera una chiave API nella pagina Credenziali di Cloud Console. Puoi seguire i passaggi descritti in questo video o in questa documentazione. Tutte le richieste a Google Maps Platform richiedono una chiave API.

3. Configura un progetto Node.js

In questo lab utilizzeremo Node.js per raccogliere l'origine e la destinazione dal web e richiedere l'itinerario tramite l'API Routes.

Supponendo che tu abbia già installato Node.js, crea una directory che utilizzerai per eseguire questo progetto:

$ mkdir ac_routes
$ cd ac_routes

Inizializza un nuovo pacchetto Node.js nella directory dell'applicazione:

$ npm init

Questo comando ti chiede una serie di informazioni, come il nome e la versione dell'applicazione. Per ora, puoi semplicemente premere INVIO per accettare i valori predefiniti per la maggior parte. Il punto di ingresso predefinito è index.js, ma puoi modificarlo con il tuo file principale. In questo lab, il file principale è function/server.js(maggiori dettagli nel passaggio 6).

Inoltre, puoi installare i framework e i moduli che preferisci. Questo lab utilizza il framework web Express e il parser del corpo body-parser. Per ulteriori dettagli, consulta il file package.json.

4. Creare una mappa dinamica

Ora che abbiamo il backend Node.js, esploriamo i passaggi necessari per il lato client.

  • Crea una pagina HTML per l'applicazione
  • Creare un file CSS per l'applicazione degli stili
  • Carica l'API Google Maps JavaScript nella pagina HTML
  • Incolla la chiave API nel tag script per autenticare l'applicazione
  • Crea un file JavaScript per gestire la funzionalità dell'applicazione

Creare una pagina HTML

  1. Crea una nuova directory nella cartella del progetto(in questo caso ac_routes).
     $ mkdir public
 $ cd public
  2. Nella directory pubblica, crea index.html
  3. Copia il seguente codice in 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>

Creare un file CSS

  1. Crea style.css nella directory pubblica
  2. Copia il seguente codice in 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;}

Caricare l'API Maps JavaScript

In questo lab utilizzeremo l'importazione dinamica della libreria per caricare l'API Maps JavaScript. Ulteriori dettagli sono disponibili qui.

In index.html, copia il seguente codice prima del tag di chiusura body. Sostituisci "YOUR_API_KEY" con la tua chiave 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>

Crea un file JavaScript

  1. Nella directory pubblica, crea app.js
  2. Copia il seguente codice in 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();
 }());

L'DEMO_MAP_ID è un ID che può essere utilizzato per gli esempi di codice che richiedono un ID Maps. Questo ID non è destinato all'uso in applicazioni di produzione e non può essere utilizzato per funzionalità che richiedono uno stile cloud. In questo lab, nella fase successiva è necessario un ID mappa per gli indicatori avanzati. Scopri di più su come creare un ID mappa per la tua applicazione.

In index.html, collega app.js prima del tag di chiusura body e dopo il tag script di caricamento dell'API Maps JavaScript.

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

Codice campione completo

Il codice completo fino a questo punto è disponibile su GitHub:step1_createDynamicMap

5. Inserisci gli indirizzi di partenza e di destinazione

  • Aggiungi due campi di testo nel file index.html per l'input di origine e destinazione
  • Importa la libreria Autocomplete
  • Associa il servizio Autocomplete ai campi di testo di origine e destinazione

Aggiungere campi di testo

In index.html, aggiungi il seguente codice come primo tag secondario di div con 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>

Importare e attivare il completamento automatico

La classe google.maps.places.Autocomplete è un widget che fornisce previsioni sui luoghi in base all'input di testo di un utente. Si collega a un elemento di input di tipo testo e ascolta l'inserimento di testo in quel campo. L'elenco delle previsioni viene visualizzato come elenco a discesa e viene aggiornato man mano che viene inserito il testo.

In app.js, aggiungi il seguente codice dopo l'inizializzazione della mappa:

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();

Una volta che un utente seleziona un luogo dall'elenco di previsioni del completamento automatico, è possibile recuperare i dettagli del risultato del luogo utilizzando il metodo getPlace(). Il risultato del luogo contiene molte informazioni su un luogo. In questo lab, utilizzeremo place_id per identificare il luogo selezionato. Gli ID luogo identificano in modo univoco un luogo nel database di Google Places e su Google Maps. Scopri di più sugli ID luogo.

Aggiungi stili pertinenti

In style.css, aggiungi il seguente codice:

.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;}

Codice campione completo

Il codice completo fino a questo punto è disponibile su GitHub:step2_inputAddress

6. Richiedere l'itinerario

  • Aggiungi un pulsante "Ottieni un itinerario" a index.html per avviare la richiesta di itinerario
  • Questo pulsante attiva l'invio dei dati di origine e destinazione al servizio Node.js
  • Il servizio Node.js invia una richiesta all'API Routes
  • La risposta API viene restituita al lato client per la visualizzazione

Con l'origine e la destinazione impostate e una mappa dinamica pronta, è il momento di ottenere l'itinerario. L'API Routes, la versione di nuova generazione e con prestazioni ottimizzate del servizio Directions e Distance Matrix, viene in tuo aiuto. In questo lab utilizzeremo Node.js per raccogliere l'origine e la destinazione dal web e richiedere l'itinerario tramite l'API Routes.

In index.html, aggiungi un pulsante "Ottieni un percorso" prima del tag di chiusura di div con la classe aside :

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

In style.css, aggiungi la seguente riga:

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

In app.js, aggiungi il codice riportato di seguito per inviare i dati di origine e destinazione al servizio 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() è la funzione che utilizzeremo per tracciare il percorso sulla mappa. Vedremo i dettagli nel passaggio successivo.

Creazione del server

Nella directory del progetto(in questo caso ac_routes), crea una nuova cartella denominata function. All'interno di questa cartella, crea un file denominato server.js. Il file funge da punto di ingresso del progetto, configurato durante la configurazione del progetto Node.js, e gestisce tre funzioni chiave:

  1. Raccolta dei dati dal client web
  2. Invio di richieste all'API Routes
  3. Restituzione della risposta API al lato client

Copia il seguente codice in server.js. Sostituisci "YOUR_API_KEY" con la tua chiave API. Per migliorare la sicurezza della chiave API, ti consigliamo vivamente di utilizzare una chiave distinta per il backend. Consulta le Indicazioni per la sicurezza.

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();

Scopri di più sull'ottenimento di un itinerario con l'API Routes.

Esegui il codice

Esegui il codice riportato di seguito nella riga di comando:

$ node function/server.js

Apri il browser e visita la pagina http://127.0.0.1:8080/index.html. Dovresti visualizzare la pagina dell'applicazione. Fino a questa fase, la risposta dell'API viene restituita al client web. Nel passaggio successivo vedremo come visualizzare l'itinerario sulla mappa.

Codice campione completo

Il codice completo fino a questo punto è disponibile su GitHub:step3_requestRoute

7. Visualizzare l'itinerario sulla mappa

Nel passaggio precedente, facciamo riferimento a renderRoutes() quando riceviamo correttamente la risposta dal servizio Node.js. Ora aggiungiamo il codice effettivo per visualizzare l'itinerario sulla mappa.

In app.js, aggiungi il codice riportato di seguito:

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 restituisce polyline nel formato encodedPolyline(impostazione predefinita) o geoJsonLinestring. In questo lab utilizziamo il formato encodedPolyline e lo decodifichiamo utilizzando la libreria di geometria di Maps JavaScript.

Utilizzeremo addMarker() per aggiungere indicatori avanzati per l'origine e la destinazione. In app.js, aggiungi il seguente codice:

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);
}

Qui creiamo due indicatori avanzati: A per l'origine e B per la destinazione. Scopri di più sugli indicatori avanzati.

Successivamente, centreremo la visualizzazione della mappa sull'itinerario recuperato, utilizzando le comode informazioni sulla visualizzazione fornite dall'API Routes. In app.js, aggiungi il seguente codice:

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));
}

Codice campione completo Il codice completo fino a questo punto è disponibile su GitHub:step4_displayRoute

8. Rimuovere elementi dalla mappa

Qui vogliamo fare un passo avanti. Puliamo la mappa prima di disegnare nuovi indicatori e percorsi per evitare il disordine.

In app.js, aggiungiamo un'altra funzione:

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);
          });
      }
  }
}

Aggiungi la seguente riga all'inizio di renderRoutes():

clearUIElem(paths,'polyline');

Aggiungi la seguente riga all'inizio di addMarker():

clearUIElem(markers,'advMarker');

Codice campione completo

Il codice completo fino a questo punto è disponibile su GitHub:step5_removeElements

9. Complimenti

Hai creato correttamente la cosa.

Che cosa hai imparato

  • Abilita le API di Google Maps Platform
  • Carica l'API Google Maps JavaScript nella pagina HTML
  • Importa la libreria Places, API Maps JavaScript
  • Associa il servizio Place Autocomplete ai campi di testo
  • Richiedere un itinerario tramite l'API Routes
  • Visualizzare l'itinerario su una mappa dinamica
  • Creare un ID mappa
  • Creare indicatori avanzati

Scopri di più

Quali altri codelab vorresti vedere?

Visualizzazione dei dati sulle mappe Scopri di più sulla personalizzazione dello stile delle mie mappe Creare edifici per interazioni 3D nelle mappe

Il codelab che ti interessa non è elencato sopra? Richiedilo con un nuovo problema qui.