Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere una mappa al tuo sito web (JavaScript)

1. Prima di iniziare

In questo codelab imparerai tutto ciò che ti serve per iniziare a utilizzare Google Maps Platform per il web. Imparerai tutte le nozioni di base, dalla configurazione al caricamento dell'API Maps JavaScript, alla visualizzazione della prima mappa, all'utilizzo di indicatori e raggruppamento di indicatori, al disegno sulla mappa e alla gestione dell'interazione dell'utente.

Cosa creerai

In questo codelab, creerai una semplice app web che esegue le seguenti operazioni:

Carica l'API Maps JavaScript
Visualizza una mappa centrata su Sydney, in Australia
Mostra indicatori personalizzati per le attrazioni più famose di Sydney
Implementa il clustering dei marker
Consente l'interazione dell'utente che ricentra e disegna un cerchio sulla mappa quando viene fatto clic su un indicatore

Obiettivi didattici

Inizia a utilizzare Google Maps Platform
Caricamento dinamico dell'API Maps JavaScript dal codice JavaScript
Caricare una mappa
Utilizzo di indicatori, indicatori personalizzati e raggruppamento di indicatori
Utilizzo del sistema di eventi dell'API Maps JavaScript per fornire l'interazione utente
Controllare la mappa in modo dinamico
Disegnare sulla mappa

2. Prerequisiti

Per completare questo codelab, devi familiarizzare con gli elementi riportati di seguito. Se hai già familiarità con Google Maps Platform, vai direttamente al Codelab.

Prodotti Google Maps Platform richiesti

In questo Codelab utilizzerai i seguenti prodotti Google Maps Platform:

API Maps JavaScript
Libreria di clustering dei marcatori open source MarkerClustererPlus

Altri requisiti per questo codelab

Per completare questo codelab, ti serviranno i seguenti account, servizi e strumenti:

Un account Google Cloud Platform con la fatturazione attivata
Una chiave API Google Maps Platform con l'API Maps JavaScript attivata
Conoscenza di base di JavaScript, HTML e CSS
Node.js installato sul computer
Un editor di testo o un IDE a tua scelta

Inizia a utilizzare Google Maps Platform

Se non hai mai utilizzato Google Maps Platform, segui la guida Inizia a utilizzare Google Maps Platform o guarda la playlist Inizia a utilizzare Google Maps Platform per completare i seguenti passaggi:

Crea un account di fatturazione.
Creare un progetto.
Abilita le API e gli SDK di Google Maps Platform (elencati nella sezione precedente).
Genera una chiave API.

3. Configurazione

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.

Nella console Cloud, fai clic sul menu a discesa del progetto e seleziona il progetto che vuoi utilizzare per questo codelab.

Abilita le API e gli SDK di Google Maps Platform richiesti per questo codelab in Google Cloud Marketplace. Per farlo, segui i passaggi descritti in questo video o in questa documentazione.
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.

Configurazione di Node.js

Se non lo hai ancora fatto, vai alla pagina https://nodejs.org/ per scaricare e installare il runtime Node.js sul computer.

Node.js include il gestore di pacchetti npm, che devi installare per le dipendenze di questo codelab.

Configurazione del modello iniziale del progetto

Prima di iniziare questo codelab, segui questi passaggi per scaricare il modello di progetto iniziale e il codice della soluzione completa:

Scarica o crea una fork del repository GitHub per questo codelab all'indirizzo https://github.com/googlecodelabs/maps-platform-101-js.

Il progetto iniziale si trova nella directory /starter e include la struttura di base dei file necessaria per completare il codelab. Tutto ciò che ti serve per lavorare si trova nella directory /starter/src. 2. Dopo aver scaricato il progetto iniziale, esegui npm install nella directory /starter. Vengono installate tutte le dipendenze necessarie elencate in package.json. 3. Una volta installate le dipendenze, esegui npm start nella directory.

Il progetto iniziale è stato configurato per l'utilizzo di webpack-dev-server, che compila ed esegue il codice che scrivi localmente. webpack-dev-server ricarica automaticamente l'app nel browser ogni volta che apporti modifiche al codice.

Se vuoi vedere l'esecuzione del codice della soluzione completa, puoi completare i passaggi di configurazione riportati sopra nella directory /solution.

4. Carica l'API Maps JavaScript

Prima di iniziare, assicurati di seguire i passaggi descritti in Configurazione. Hai finito? Ok, è il momento di creare la tua prima app web utilizzando Google Maps Platform.

La base per l'utilizzo di Google Maps Platform per il web è l'API Maps JavaScript. Questa API fornisce un'interfaccia JavaScript per l'utilizzo di tutte le funzionalità di Google Maps Platform, tra cui la mappa, i marcatori, gli strumenti di disegno e altri servizi di Google Maps Platform, come Places.

Se hai esperienza con l'API Maps JavaScript, potresti avere familiarità con il caricamento inserendo un tag script in un file HTML come questo:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

Questo è ancora un modo perfettamente valido per caricare l'API, ma nelle dipendenze JavaScript moderne vengono normalmente incluse dinamicamente dal codice. Per ottenere l'equivalente del tag script riportato sopra dal codice, utilizzerai il modulo@googlemaps/js-api-loader. Il caricatore dell'API JS è già incluso nelle dipendenze del file package.json del progetto, quindi è stato installato quando hai eseguito npm install in precedenza.

Per utilizzare il caricatore dell'API JavaScript:

Apri /src/app.js. In questo file svolgerai tutto il lavoro per questo codelab.
Importa la classe Loader da @googlemaps/js-api-loader.

Aggiungi quanto segue all'inizio di app.js:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
Crea un oggetto apiOptions.

La classe Loader richiede un oggetto JSON che specifichi varie opzioni per il caricamento dell'API Maps JavaScript, tra cui la chiave API Google Maps Platform, la versione dell'API che vuoi caricare e qualsiasi libreria aggiuntiva fornita dall'API Maps JS che vuoi caricare. Ai fini di questo codelab, devi specificare solo la chiave API aggiungendo quanto segue a app.js:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Crea un'istanza di Loader e trasmettila a apiOptions.
```
 const loader = new Loader(apiOptions);
```
Carica l'API Maps JavaScript.

Per caricare l'API, chiama load() sull'istanza Loader. Il caricatore dell'API JS restituisce una promessa che viene risolta una volta caricata l'API e pronta per l'uso. Aggiungi il seguente stub per caricare l'API e gestire la promessa:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

Se tutto va a buon fine, dovresti visualizzare l'istruzione console.log nella console del browser. Utilizzando Chrome, è possibile accedere a questa finestra aggiuntiva in Visualizza > Sviluppatore > Console JavaScript.

Ricapitolando, ora hai caricato dinamicamente l'API Maps JavaScript dal codice e hai definito la funzione di callback che viene eseguita al termine del caricamento dell'API Maps JavaScript.

Il file app.js dovrebbe avere il seguente aspetto:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.load().then(() => {
      console.log('Maps JS API Loaded');
    });

Ora che l'API Maps JavaScript è caricata, caricherai la mappa nel passaggio successivo.

5. Visualizzare una mappa

È ora di visualizzare la tua prima mappa.

La parte più utilizzata dell'API Maps JavaScript è google.maps.Map, la classe che ci consente di creare e manipolare le istanze della mappa. Scopri come fare creando una nuova funzione chiamata displayMap().

Definisci le impostazioni della mappa.

L'API Maps JavaScript supporta una serie di impostazioni diverse per la mappa, ma solo due sono obbligatorie:
- center: imposta la latitudine e la longitudine per il centro della mappa.
- zoom: imposta il livello di zoom iniziale della mappa.
Utilizza il seguente codice per centrare la mappa su Sydney, in Australia, e impostare un livello di zoom pari a 14, che è il livello di zoom ideale per mostrare il centro della città.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
Ottieni il div in cui deve essere inserita la mappa nel DOM.

Prima di poter visualizzare la mappa, devi indicare all'API Maps JavaScript dove vuoi che venga visualizzata nella pagina. Se dai un'occhiata rapida a index.html, vedrai che esiste già un div simile a questo:
```
 <div id="map"></div>
```
Per indicare all'API Maps JavaScript che è qui che vuoi inserire la mappa, utilizza document.getElementById per ottenere il riferimento DOM:
```
 const mapDiv = document.getElementById('map');
```
Crea un'istanza di google.maps.Map.

Per chiedere all'API Maps JavaScript di creare una nuova mappa che possa essere visualizzata, crea un'istanza di google.maps.Map e trasmetti mapDiv e mapOptions. Da questa funzione viene restituita anche l'istanza Map, in modo da poterla utilizzare in un secondo momento:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Visualizza la mappa.

Una volta definita tutta la logica per la creazione dell'istanza della mappa, non ti resta che chiamare displayMap() dal gestore delle promesse dell'API JS in modo che venga chiamato una volta caricata l'API Maps JavaScript:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

Ora dovresti vedere una bellissima mappa di Sydney nel tuo browser:

Ricapitolando, in questo passaggio hai definito le opzioni di visualizzazione per la mappa, creato una nuova istanza della mappa e l'hai inserita nel DOM.

La funzione displayMap() dovrebbe avere un aspetto simile al seguente:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. Personalizzazione delle mappe basata su cloud (facoltativo)

Puoi personalizzare lo stile della mappa utilizzando la personalizzazione delle mappe basata su cloud.

Creare un ID mappa

Se non hai ancora creato un ID mappa a cui è associato uno stile di mappa, consulta la guida ID mappa per completare i seguenti passaggi:

Crea un ID mappa.
Associa un ID mappa a uno stile di mappa.

Aggiungere l'ID mappa alla tua app

Per utilizzare l'ID mappa che hai creato, modifica la funzione displayMap nel file app.js e trasmetti l'ID mappa nella proprietà mapId dell'oggetto mapOptions.

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Al termine, dovresti vedere lo stile selezionato sulla mappa.

7. Aggiungere indicatori alla mappa

Gli sviluppatori fanno molte cose con l'API Maps JavaScript, ma inserire indicatori sulla mappa è sicuramente la più popolare. I marcatori ti consentono di mostrare punti specifici sulla mappa e sono un elemento comune della UI per gestire l'interazione degli utenti. Se hai già utilizzato Google Maps, probabilmente conosci il segnaposto predefinito, che ha questo aspetto:

In questo passaggio, utilizzerai google.maps.Marker per posizionare i marcatori sulla mappa.

Definisci un oggetto per le posizioni dei marcatori.

Per iniziare, crea una nuova funzione addMarkers() e dichiara un oggetto locations che contenga il seguente insieme di punti di latitudine/longitudine per le attrazioni turistiche più famose di Sydney.

Tieni inoltre presente che devi passare l'istanza Map alla funzione. Lo utilizzerai in un secondo momento quando creerai le istanze del marcatore.

 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }

Crea un'istanza di google.maps.Marker per ogni marcatore che vuoi visualizzare.

Per creare i marcatori, utilizza il codice riportato di seguito per scorrere l'oggetto locations utilizzando un ciclo for...in, crea un insieme di opzioni per il rendering di ogni marcatore e poi crea un'istanza di google.maps.Marker per ogni località.

Nota la proprietà icon di markerOptions. Ricordi il segnaposto predefinito della mappa che abbiamo visto prima? Sapevi che puoi anche personalizzare il segnaposto con qualsiasi immagine tu voglia? Ebbene, puoi farlo.

La proprietà icon consente di fornire il percorso di qualsiasi file immagine che vuoi utilizzare come indicatore personalizzato. Se hai iniziato questo codelab utilizzando il nostro modello di progetto, un'immagine è già inclusa per te in /src/images.

Tieni presente inoltre che devi memorizzare le istanze del marcatore in un array e restituirle dalla funzione in modo che possano essere utilizzate in un secondo momento.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
Visualizza i marcatori.

L'API Maps JavaScript crea e mostra automaticamente un indicatore ogni volta che viene creata una nuova istanza di google.maps.Marker, quindi ora devi solo aggiornare il gestore delle promesse dell'API JS per chiamare addMarkers() e trasmettergli l'istanza Map:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

Ora dovresti vedere i marcatori personalizzati sulla mappa:

Ricapitolando, in questo passaggio hai definito un insieme di posizioni dei marker e creato un'istanza di google.maps.Marker con un'icona del marker personalizzata per ogni posizione.

La funzione addMarkers() dovrebbe avere un aspetto simile al seguente:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

Nel passaggio successivo, vedrai come migliorare l'esperienza utente dei marcatori utilizzando il raggruppamento dei marcatori.

8. Attiva il clustering dei marcatori

Quando utilizzi molti indicatori o indicatori molto vicini tra loro, potresti riscontrare un problema di sovrapposizione o di affollamento, che causa una cattiva esperienza utente. Ad esempio, dopo aver creato i marcatori nell'ultimo passaggio, potresti aver notato questo:

È qui che entra in gioco il raggruppamento dei marcatori. Il clustering dei marcatori è un'altra funzionalità comunemente implementata, che raggruppa i marcatori vicini in un'unica icona che cambia a seconda del livello di zoom, come in questo esempio:

L'algoritmo per il clustering dei marcatori divide l'area visibile della mappa in una griglia, quindi raggruppa le icone che si trovano nella stessa cella. Fortunatamente, non devi preoccuparti di nulla di tutto questo perché il team di Google Maps Platform ha creato una libreria di utilità open source utile chiamata MarkerClustererPlus che fa tutto automaticamente. Puoi visualizzare il codice sorgente di MarkerClustererPlus su GitHub.

Importa il file MarkerCluster.

Per il progetto modello di questo codelab, la libreria di utilità MarkerClustererPlus è già inclusa nelle dipendenze dichiarate nel file package.json, quindi l'hai già installata quando hai eseguito npm install all'inizio di questo codelab.

Per importare la libreria, aggiungi quanto segue all'inizio del file app.js:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
Crea una nuova istanza di MarkerClusterer.

Per creare cluster di marcatori, devi fare due cose: fornire le icone che vuoi utilizzare per i cluster di marcatori e creare una nuova istanza di MarkerClusterer.

Innanzitutto, dichiara un oggetto che specifica il percorso delle icone che vuoi utilizzare. Nel progetto modello è già presente un insieme di immagini salvate in ./img/m. Nota che i nomi dei file delle immagini sono numerati in sequenza con lo stesso prefisso: m1.png, m2.png, m3.png e così via.

Quando imposti la proprietà imagePath nelle opzioni per il raggruppamento dei marcatori, fornisci semplicemente il percorso e il prefisso del file e il raggruppamento dei marcatori utilizza automaticamente tutti i file con quel prefisso e aggiunge un numero alla fine.

In secondo luogo, crea una nuova istanza di MarkerClusterer e trasmettila all'istanza di Map in cui vuoi visualizzare i cluster di marcatori e un array di istanze di Marker che vuoi raggruppare.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
Visualizza i cluster di indicatori.

Chiama clusterMarkers() dal gestore di promesse dell'API JS. I cluster di marcatori vengono aggiunti automaticamente alla mappa quando viene creata l'istanza MarkerClusterer nella chiamata di funzione.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

Ora dovresti vedere un paio di cluster di indicatori sulla mappa.

Tieni presente che se aumenti o diminuisci lo zoom, MarkerClustererPlus rinumera e ridimensiona automaticamente i cluster. Puoi anche fare clic su qualsiasi icona di cluster di indicatori per aumentare lo zoom e visualizzare tutti gli indicatori inclusi nel cluster.

Ricapitolando, in questo passaggio hai importato la libreria di utilità open source MarkerClustererPlus e l'hai utilizzata per creare un'istanza di MarkerClusterer che raggruppa automaticamente i marcatori creati nel passaggio precedente.

La funzione clusterMarkers() dovrebbe avere un aspetto simile al seguente:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

Successivamente, imparerai a gestire l'interazione degli utenti.

9. Aggiungere l'interazione utente

Ora hai una mappa dall'aspetto fantastico che mostra alcune delle destinazioni turistiche più popolari di Sydney. In questo passaggio, aggiungerai una gestione aggiuntiva delle interazioni degli utenti utilizzando il sistema di eventi dell'API Maps JavaScript per migliorare ulteriormente l'esperienza utente della tua mappa.

L'API Maps JavaScript fornisce un sistema di eventi completo che utilizza i gestori di eventi JavaScript per consentirti di gestire varie interazioni utente nel codice. Ad esempio, puoi creare listener di eventi per attivare l'esecuzione del codice per interazioni come il clic dell'utente sulla mappa e sugli indicatori, lo spostamento della visualizzazione della mappa, l'aumento e la riduzione dello zoom e altro ancora.

In questo passaggio, aggiungerai un listener di clic ai tuoi indicatori e poi farai in modo che la mappa si sposti in modo programmatico per posizionare l'indicatore su cui l'utente ha fatto clic al centro della mappa.

Imposta un listener dei clic sui marcatori.

Tutti gli oggetti nell'API Maps JavaScript che supportano il sistema di eventi implementano un insieme standard di funzioni per la gestione dell'interazione dell'utente, come addListener, removeListener e altro ancora.

Per aggiungere un listener di eventi di clic a ogni indicatore, scorri l'array markers e chiama addListener sull'istanza dell'indicatore per collegare un listener per l'evento click:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
Esegui la panoramica su un indicatore quando viene selezionato.

L'evento click viene attivato ogni volta che un utente fa clic o tocca un indicatore e restituisce un evento come oggetto JSON con informazioni sull'elemento UI su cui è stato fatto clic. Per migliorare l'esperienza utente della mappa, puoi gestire l'evento click e utilizzare il relativo oggetto LatLng per ottenere la latitudine e la longitudine del marker su cui è stato fatto clic.

Una volta ottenuto, passalo alla funzione panTo() integrata dell'istanza Map per far sì che la mappa si sposti in modo fluido per ricentrarsi sull'indicatore su cui è stato fatto clic aggiungendo quanto segue nella funzione di callback del gestore eventi:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```

Assegna i listener dei clic.

Chiama addPanToMarker() dal gestore di promesse dell'API JS e trasmetti la mappa e gli indicatori per eseguire il codice e assegnare i listener di clic.

 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });

Ora vai al browser e fai clic sui tuoi indicatori. Quando fai clic su un indicatore, la mappa dovrebbe spostarsi automaticamente per ricentrarsi.

Ricapitolando, in questo passaggio hai utilizzato il sistema di eventi dell'API Maps JavaScript per assegnare un listener di clic a tutti i marcatori sulla mappa, hai recuperato la latitudine e la longitudine del marcatore dall'evento di clic attivato e le hai utilizzate per ricentrare la mappa ogni volta che viene fatto clic su un marcatore.

La funzione addPanToMarker() dovrebbe avere un aspetto simile al seguente:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Manca solo un ultimo passaggio. Successivamente, migliorerai ulteriormente l'esperienza utente della mappa utilizzando le funzionalità di disegno dell'API Maps JavaScript.

10. Disegna sulla mappa

Finora hai creato una mappa di Sydney che mostra i segnaposto per le destinazioni turistiche più famose e gestisce l'interazione dell'utente. Per l'ultimo passaggio di questo codelab, utilizzerai le funzionalità di disegno dell'API Maps JavaScript per aggiungere un'altra funzionalità utile alla tua esperienza con le mappe.

Immagina che questa mappa venga utilizzata da utenti che vogliono esplorare la città di Sydney. Una funzionalità utile sarebbe quella di visualizzare un raggio intorno a un indicatore quando viene fatto clic. In questo modo, l'utente può capire facilmente quali altre destinazioni si trovano a pochi passi dal marker su cui ha fatto clic.

L'API Maps JavaScript include un insieme di funzioni per disegnare forme sulla mappa, come quadrati, poligoni, linee e cerchi. Successivamente, visualizzerai un cerchio per mostrare un raggio di 800 metri (circa mezzo miglio) intorno a un indicatore quando viene fatto clic.

Disegna un cerchio con google.maps.Circle.

Le funzioni di disegno dell'API Maps JavaScript offrono un'ampia gamma di opzioni per l'aspetto di un oggetto disegnato sulla mappa. Per eseguire il rendering di un raggio circolare, dichiara un insieme di opzioni per un cerchio, ad esempio colore, spessore del tratto, dove deve essere centrato il cerchio e il suo raggio, quindi crea una nuova istanza di google.maps.Circle per creare un nuovo cerchio:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
Disegna il cerchio quando viene fatto clic su un indicatore.

Per disegnare il cerchio quando l'utente fa clic su un indicatore, devi solo chiamare la funzione drawCircle() che hai scritto sopra dal callback del listener di clic in addPanToMarker() e passargli la mappa e la posizione dell'indicatore.

Nota come viene aggiunta anche un'istruzione condizionale che chiama circle.setMap(null). In questo modo, il cerchio precedentemente visualizzato viene rimosso dalla mappa se l'utente fa clic su un altro indicatore, in modo da non ritrovarsi una mappa coperta di cerchi mentre l'utente la esplora.

La funzione addPanToMarker() dovrebbe avere un aspetto simile a questo:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

Operazione completata. Vai al browser e fai clic su uno dei marcatori. Dovresti vedere un raggio circolare intorno:

11. Complimenti

Hai creato correttamente la tua prima app web utilizzando Google Maps Platform, inclusi il caricamento dell'API Maps JavaScript, il caricamento di una mappa, l'utilizzo dei marker, il controllo e il disegno sulla mappa e l'aggiunta dell'interazione dell'utente.

Per visualizzare il codice completato, controlla il progetto finito nella directory /solutions.

Passaggi successivi

In questo codelab hai appreso le nozioni di base su cosa puoi fare con l'API Maps JavaScript. Poi, prova ad aggiungere alcune di queste funzionalità alla mappa:

Modifica il tipo di mappa per visualizzare mappe satellitari, ibride e del terreno.
Attiva la localizzazione per caricare la mappa in lingue diverse.
Personalizza altre interazioni utente come lo zoom e i controlli della mappa.
Aggiungi finestre informative per visualizzare le informazioni quando si fa clic sui marcatori.
Dai un'occhiata alle librerie aggiuntive disponibili per l'API Maps JavaScript che consentono funzionalità aggiuntive, come luoghi, disegno e visualizzazione.

Per continuare a scoprire altri modi per utilizzare Google Maps Platform sul web, consulta questi link: