Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere una mappa al sito web (JavaScript)

1. Prima di iniziare

In questo codelab, troverai tutto ciò che ti serve per iniziare a utilizzare Google Maps Platform per il Web. Imparerai tutte le nozioni di base, dalla configurazione alla caricamento dell'API Maps JavaScript, alla visualizzazione della prima mappa, all'utilizzo di indicatori e clustering di indicatori, al disegno sulla mappa e alla gestione delle interazioni degli utenti.

Cosa devi creare

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

Carica l'API Maps JavaScript
Visualizza una mappa incentrata su Sydney, Australia
Visualizza indicatori personalizzati per le attrazioni più popolari di Sydney
Implementa il clustering degli indicatori
Consente l'interazione dell'utente e indica un cerchio sulla mappa quando viene selezionato un indicatore

Obiettivi didattici

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

2. Prerequisiti

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

Prodotti di Google Maps Platform obbligatori

In questo codelab, utilizzerai i seguenti prodotti di Google Maps Platform:

API Maps JavaScript
MarkerClustererPlus libreria di cluster di indicatori open source

Altri requisiti per questo codelab

Per completare questo codelab, avrai bisogno dei seguenti account, servizi e strumenti:

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

Inizia a utilizzare Google Maps Platform

Se non hai mai utilizzato Google Maps Platform, segui la guida introduttiva a Google Maps Platform o guarda la playlist Introduzione a Google Maps Platform per completare la seguente procedura:

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

3. Configura

Configurare Google Maps Platform

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

In Cloud Console, 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 la procedura descritta in questo video o in questa documentazione.
Genera una chiave API nella pagina Credentials di Cloud Console. Puoi seguire la procedura descritta 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 già, visita https://nodejs.org/ per scaricare e installare il runtime Node.js sul tuo computer.

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

Configurazione modello di avvio progetto

Prima di iniziare questo codelab, procedi come segue per scaricare il modello di progetto iniziale e il codice di soluzione completo:

Scarica o crea un 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 del file necessaria per completare il codelab. Tutto ciò che ti serve è disponibile nella directory /starter/src. 2. Una volta scaricato il progetto iniziale, esegui npm install nella directory /starter. Vengono installate tutte le dipendenze necessarie elencate in package.json. 3. Dopo aver installato le dipendenze, esegui npm start nella directory.

Il progetto iniziale è stato configurato in modo che tu possa utilizzare webpack-dev-server, il quale compila ed esegue il codice che scrivi in locale. webpack-dev-server ricarica automaticamente anche la tua app nel browser ogni volta che apporti modifiche al codice.

Se vuoi vedere il codice della soluzione completo in esecuzione, puoi completare i passaggi di configurazione precedenti nella directory /solution.

4. Carica l'API Maps JavaScript

Prima di iniziare, assicurati di seguire la procedura descritta in Configurazione. Hai finito? OK, è il momento di creare la tua prima app web utilizzando Google Maps Platform.

La base di Google Maps Platform per il Web è l'API Maps JavaScript. Questa API offre un'interfaccia JavaScript per utilizzare tutte le funzionalità di Google Maps Platform, tra cui la mappa, gli indicatori, gli strumenti di disegno e altri servizi Google Maps Platform, come Places.

Se hai già esperienza con l'API Maps JavaScript, potresti voler caricare il tag inserendo un tag script in un file HTML come il seguente:

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

Questo metodo è ancora valido per caricare l'API, ma nelle moderne dipendenze di JavaScript vengono normalmente incluse in modo dinamico 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 di API JS:

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

Aggiungi il seguente testo in alto a app.js:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
Crea un oggetto apiOptions.

La classe Loader richiede un oggetto JSON che specifica varie opzioni per caricare l'API Maps JavaScript, inclusa la tua chiave API Google Maps Platform, quale versione dell'API vuoi caricare ed eventuali librerie aggiuntive fornite dall'API Maps JS che vuoi caricare. Ai fini di questo codelab, devi solo specificare la chiave API aggiungendo quanto segue a app.js:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Crea un'istanza di Loader e trasmetti il tuo apiOptions.
```
 const loader = new Loader(apiOptions);
```
Carica l'API Maps JS.

Per caricare l'API, chiama load() nell'istanza Loader. Il caricatore dell'API JS restituisce una promessa che si risolve non appena l'API è stata caricata 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 è andato a buon fine, dovresti vedere l'istruzione console.log nella console del browser:

Per riassumere, 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 JavaScript.

Il file app.js dovrebbe essere simile al seguente:

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

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

    const loader = new Loader(apiOptions);

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

Una volta caricata l'API Maps JavaScript, caricherai la mappa nel passaggio successivo.

5. Visualizzazione di una mappa

È ora di visualizzare la tua prima mappa.

La parte più utilizzata dell'API Maps JavaScript è google.maps.Map, che è la classe che ci consente di creare e manipolare le istanze della mappa. Dai un'occhiata a come funziona 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 ne sono richieste solo due:
- center: imposta la latitudine e la longitudine del centro della mappa.
- zoom: consente di impostare il livello di zoom iniziale della mappa.
Utilizza il seguente codice per centrare la mappa su Sydney, in Australia, e assegnare un livello di zoom pari a 14, che corrisponda al livello corretto per mostrare il centro città.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
Calcola div in cui la mappa deve essere inserita nel DOM.

Prima di poter visualizzare la mappa, devi comunicare all'API Maps JavaScript dove vuoi che venga visualizzata nella pagina. Se dai un rapido sguardo a index.html, vedrai che esiste già un div simile a questo:
```
 <div id="map"></div>
```
Per indicare all'API JavaScript di Maps dove viene inserita 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 JavaScript di Maps di creare una nuova mappa che possa essere visualizzata, crea un'istanza di google.maps.Map e trasmetti in mapDiv e mapOptions. Puoi anche restituire l'istanza Map da questa funzione in modo da poterla fare in un secondo momento:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Visualizza la mappa!

Dopo aver definito tutta la logica per la creazione dell'istanza mappa, è sufficiente chiamare displayMap() dal gestore di promesse dell'API JS in modo che venga chiamato dopo il caricamento dell'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:

In questo modo hai definito le opzioni di visualizzazione della mappa, hai creato una nuova istanza della mappa e l'hai inserita nel DOM.

La funzione displayMap() dovrebbe essere simile a questa:

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. Stile della mappa basato su cloud (facoltativo)

Puoi personalizzare lo stile della mappa utilizzando gli stili basati su cloud.

Crea un ID mappa

Se non hai ancora creato un ID mappa con uno stile associato, consulta la guida ID mappa per completare la seguente procedura:

Crea un ID mappa.
Associa un ID mappa a uno stile 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);
}

Una volta completata questa operazione, dovresti vedere lo stile che hai selezionato sulla mappa.

7. Aggiungere indicatori alla mappa

L'API Maps JavaScript richiede molte cose, ma è importante inserire gli indicatori sulla mappa. Gli indicatori consentono di mostrare punti specifici sulla mappa e sono un elemento comune dell'interfaccia utente per la gestione dell'interazione degli utenti. Se hai già utilizzato Google Maps, probabilmente conosci l'indicatore predefinito, simile al seguente:

In questo passaggio, utilizzerai google.maps.Marker per inserire gli indicatori sulla mappa.

Definisci un oggetto per le posizioni degli indicatori.

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

Inoltre, tieni presente che devi passare l'istanza Map alla funzione. Lo utilizzerai in un secondo momento, quando creerai le istanze dell'indicatore.

 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 indicatore che vuoi visualizzare.

Per creare i tuoi indicatori, utilizza il codice riportato di seguito per eseguire l'iterazione tramite l'oggetto locations utilizzando un loop for...in, creare un insieme di opzioni per la modalità di rendering di ciascun indicatore, quindi creare un'istanza di google.maps.Marker per ogni posizione.

Osserva la proprietà icon di markerOptions. Ricordi il segnaposto predefinito della mappa? Lo sapevi che puoi anche personalizzare il segnaposto in base alle immagini che preferisci? Beh, puoi!

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

Tieni inoltre presente che devi archiviare le istanze degli indicatori in un array e restituirle dalla funzione in modo da poter 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 gli indicatori.

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

Gli indicatori personalizzati ora dovrebbero essere visualizzati sulla mappa:

In questo passaggio hai definito un insieme di posizioni degli indicatori e hai creato un'istanza di google.maps.Marker con un'icona personalizzata per ogni località.

La funzione addMarkers() dovrebbe essere simile a questa:

    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, scoprirai come migliorare l'esperienza utente degli indicatori utilizzando il clustering degli indicatori.

8. Abilita clustering indicatori

Quando gli indicatori sono troppo vicini tra loro, potrebbero verificarsi problemi quando gli indicatori si sovrappongono o appaiono troppo affollati, causando un'esperienza utente negativa. Ad esempio, dopo aver creato gli indicatori nell'ultimo passaggio, potresti averlo notato:

È qui che entra in gioco il clustering degli indicatori. Il clustering degli indicatori è un'altra funzionalità ampiamente implementata, che raggruppa gli indicatori vicini in un'unica icona che varia a seconda del livello di zoom, come nel seguente esempio:

L'algoritmo per il clustering degli indicatori suddivide l'area visibile della mappa in una griglia, quindi raggruppa le icone che si trovano nella stessa cella. Fortunatamente, non devi preoccuparti di questo aspetto, perché il team di Google Maps Platform ha creato una libreria di utilità open source utile, MarkerClustererPlus, che fa tutto automaticamente. Puoi visualizzare l'origine per MarkerClustererPluson GitHub.

Importa il MarkerCluster.

Per il progetto modello per questo codelab, la libreria di utilità MarkerClustererPlus è già inclusa nelle dipendenze dichiarate nel file package.json, quindi lo hai già installato 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 indicatori, devi fare due cose: fornire le icone che vuoi utilizzare per i cluster di indicatori e creare una nuova istanza di MarkerClusterer.

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

Quando imposti la proprietà imagePath nelle opzioni del cluster di indicatori, indichi semplicemente il percorso e il prefisso del file. Il cluster di indicatori utilizza automaticamente tutti i file con quel prefisso e aggiunge un numero alla fine.

Poi, crea una nuova istanza di MarkerClusterer e trasmetti l'istanza di Map in cui vuoi visualizzare i cluster di indicatori 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 degli indicatori.

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

Ora sulla mappa dovrebbero essere visualizzati un paio di cluster di indicatori.

Se aumenti o diminuisci lo zoom, PennClustererPlus rinumera e ridimensiona automaticamente i cluster. Puoi anche fare clic sull'icona di qualsiasi cluster di indicatore per aumentare lo zoom e visualizzare tutti gli indicatori inclusi in tale cluster.

In breve, in questo passaggio hai importato la libreria open source MarkerClustererPlus e l'hai utilizzata per creare un'istanza di MarkerClusterer che raccoglieva automaticamente gli indicatori che hai creato nel passaggio precedente.

La funzione clusterMarkers() dovrebbe essere simile a questa:

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

Ora imparerai come gestire l'interazione degli utenti.

9. Aggiungi l'interazione dell'utente

Ora hai una mappa dall'aspetto fantastico che mostra alcune delle destinazioni turistiche più popolari di Sydney. In questo passaggio dovrai aggiungere ulteriori opzioni di gestione delle interazioni degli utenti con il sistema di eventi dell'API JavaScript di Maps per migliorare ulteriormente l'esperienza degli utenti sulla mappa.

L'API Maps JavaScript fornisce un sistema di eventi completo che utilizza gestori di eventi JavaScript per consentirti di gestire varie interazioni degli utenti nel codice. Ad esempio, puoi creare listener di eventi per attivare l'esecuzione del codice per interazioni quali l'utente che fa clic sulla mappa e sugli indicatori, esegue una panoramica della mappa, aumenta o diminuisce lo zoom e altro ancora.

In questo passaggio devi aggiungere un listener di clic ai tuoi indicatori e poi impostare la panoramica della mappa in modo programmatico per posizionare l'indicatore su cui l'utente ha fatto clic al centro della mappa.

Imposta un listener di clic sugli indicatori.

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

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

     });
   });
 }
```
Fai clic su un indicatore quando viene selezionato.

L'evento click viene attivato ogni volta che un utente tocca o fa clic su un indicatore e restituisce un evento come oggetto JSON con informazioni sull'elemento dell'interfaccia utente 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 dell'indicatore su cui è stato fatto clic.

Una volta trovata questa informazione, puoi semplicemente trasmetterla alla funzione panTo() integrata dell'istanza di Map per fare in modo che la mappa venga spostata al centro sull'indicatore selezionato, aggiungendo quanto segue nella funzione di callback del gestore di eventi:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```

Assegnare i listener di clic.

Chiama addPanToMarker() dal gestore delle promesse dell'API JS: trasmettilo alla mappa e agli 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 accedi al browser e fai clic sui tuoi indicatori. Quando viene fatto clic su un indicatore, viene visualizzata automaticamente la panoramica della mappa per centrare.

In questo modo hai utilizzato il sistema di eventi dell'API di Maps per Maps per assegnare un listener di clic a tutti gli indicatori sulla mappa, hai recuperato la latitudine e la longitudine dell'indicatore dall'evento di clic attivato e lo hai utilizzato per ricentrare la mappa ogni volta che viene fatto clic su un indicatore.

La funzione addPanToMarker() dovrebbe essere simile a questa:

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

Ancora un ultimo passaggio! Ora puoi migliorare 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 indicatori di destinazioni turistiche popolari e gestisce l'interazione degli utenti. Nell'ultimo passaggio di questo codelab, utilizzerai le funzionalità di disegno dell'API Maps JavaScript per aggiungere un'ulteriore funzionalità utile alla tua esperienza sulla mappa.

Immagina che questa mappa venga utilizzata dagli utenti che hanno intenzione di esplorare la città di Sydney. Una funzionalità utile consiste nel visualizzare un raggio intorno a un indicatore quando viene selezionato. consentendo all'utente di comprendere facilmente quali altre destinazioni si trovano a pochi passi dall'indicatore selezionato.

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

Disegna un cerchio con google.maps.Circle.

Le funzioni di disegno nell'API Maps JavaScript offrono un'ampia gamma di opzioni per la visualizzazione di un oggetto disegnato sulla mappa. Per visualizzare un raggio circolare, dichiara un insieme di opzioni per un cerchio, ad esempio il colore, il peso del tratto, il punto in cui il centro deve essere centrato e il relativo 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 semplicemente chiamare la funzione drawCircle() che hai scritto sopra dal callback del listener di clic in addPanToMarker() e trasmetterla sulla mappa e sulla posizione dell'indicatore.

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

La funzione addPanToMarker() dovrebbe avere il seguente aspetto:
```
 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 Apri il browser e fai clic su uno degli indicatori. Dovresti vedere un raggio circolare intorno a esso:

11. Complimenti

Hai creato la tua prima app web utilizzando Google Maps Platform, ad esempio caricando l'API Maps JavaScript, caricando una mappa, utilizzando gli indicatori, controllando e disegnando sulla mappa e aggiungendo interazioni con gli utenti.

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

Passaggi successivi

In questo codelab hai appreso le nozioni di base sull'API JavaScript di Google Maps. Poi, prova ad aggiungere alcune di queste funzionalità alla mappa:

Modifica il tipo di mappa per visualizzare mappe satellitari, ibride e rilievi.
Abilita localizzazione per caricare la mappa in diverse lingue.
Personalizza altre interazioni utente come lo zoom e i controlli della mappa.
Aggiungi finestre informative per visualizzare informazioni quando gli utenti fanno clic sugli indicatori.
Dai un'occhiata alle librerie aggiuntive disponibili per l'API JavaScript di Maps, che abilitano funzionalità aggiuntive, come Luoghi, disegno e visualizzazione.

Per continuare a scoprire altri modi per lavorare con Google Maps Platform sul Web, consulta questi link: