Ti presentiamo Places UI Kit: una libreria di componenti pronta all'uso e a basso costo che ti consente di portare su qualsiasi mappa di tua scelta l'interfaccia utente di Google Maps per Places che conosci già. Provalo e condividi il tuo feedback per contribuire a plasmare il futuro di GMP.

Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere una mappa Google a un'app React

1. Prima di iniziare

In questo codelab imparerai tutto ciò che ti serve per iniziare a utilizzare la libreria vis.gl/react-google-map per l'API Maps JavaScript, che ti consente di aggiungere una mappa di Google a un'app React. Imparerai a configurare l'ambiente, caricare l'API Maps JavaScript, visualizzare la prima mappa, lavorare con i marker e il raggruppamento dei marker, disegnare sulla mappa e gestire l'interazione degli utenti.

Prerequisiti

Conoscenza di base di JavaScript, HTML e CSS

Cosa imparerai

Come iniziare a utilizzare la libreria vis.gl/react-google-map per Google Maps Platform.
Come caricare l'API Maps JavaScript in modo dichiarativo.
Come caricare una mappa in un'app React.
Come utilizzare i marcatori, i marcatori personalizzati e il raggruppamento dei marcatori.
Come utilizzare il sistema di eventi dell'API Maps JavaScript per fornire l'interazione con l'utente.
Come controllare la mappa in modo dinamico.
Come disegnare sulla mappa.

Cosa serve

Un account Google Cloud con la fatturazione attivata.
Una chiave API Google Maps Platform con l'API Maps JavaScript attivata.
Node.js installato sul computer.
Un editor di testo o un IDE a tua scelta.
La libreria vis.gl/react-google-map per l'API Google Maps JavaScript.
La raccolta googlemaps/markerclusterer

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.

2. Configurazione

Scaricare il progetto iniziale

Per scaricare il modello di progetto iniziale e il codice della soluzione, segui questi passaggi:

Scarica o crea un fork del repository GitHub. Il progetto iniziale si trova nella directory /starter e include la struttura di base dei file necessaria per completare il codelab. Svolgi tutto il tuo lavoro nella directory /starter/src.

git clone https://github.com/googlemaps-samples/codelab-maps-platform-101-react-js.git

In alternativa, fai clic su questo pulsante per scaricare il codice sorgente.

Vai alla directory /starter e installa npm. Vengono installate tutte le dipendenze necessarie elencate nel file package.json.

cd starter && npm install

Mentre ti trovi ancora nella directory /starter:

npm start

Il progetto iniziale è stato configurato per l'utilizzo del server di sviluppo Vite, che compila ed esegue il codice che scrivi localmente. Il server di sviluppo Vite ricarica automaticamente l'app nel browser ogni volta che apporti modifiche al codice. Se segui il link fornito al termine della procedura di compilazione, dovresti trovare una pagina web con il messaggio "Hello, world!".

Se vuoi eseguire il codice della soluzione completa, vai alla directory /solution e completa gli stessi passaggi di configurazione.

3. Carica l'API Maps JavaScript

La base per l'utilizzo di Google Maps Platform per il web è l'API Maps JavaScript. Questa API fornisce un'interfaccia JavaScript per utilizzare 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.

Per caricare l'API Maps JavaScript con il framework React, devi utilizzare il componente APIProvider che fa parte della libreria vis.gl/react-google-map. Questo componente può essere aggiunto a qualsiasi livello dell'app, in genere in alto, e visualizza tutti i componenti secondari senza modifiche. Oltre a gestire il caricamento dell'API Maps JavaScript, fornisce anche informazioni di contesto e funzioni per gli altri componenti e hook di questa libreria. APIProvider è incluso nella libreria vis.gl/react-google-map, quindi è stato installato quando hai eseguito npm install in precedenza.

Per utilizzare il componente APIProvider:

Apri il file /src/app.tsx. In questo file svolgerai tutto il lavoro per questo codelab.
All'inizio del file, importa la classe APIProvider dalla libreria @vis.gl/react-google-maps:

import {APIProvider} from '@vis.gl/react-google-maps';

Nella definizione della funzione App, imposta il parametro apiKey del componente APIProvider con la chiave API creata nel passaggio precedente e la proprietà onLoad con un messaggio di log della console:

<APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>

Il componente APIProvider accetta una serie di proprietà che specificano varie opzioni per il caricamento dell'API Maps JavaScript, tra cui la chiave API di Google Maps Platform, la versione dell'API da caricare e le eventuali librerie aggiuntive fornite dall'API Maps JavaScript da caricare.

La chiave API di Google Maps è l'unica proprietà richiesta per il funzionamento di APIProvider e abbiamo incluso la proprietà onLoad a scopo dimostrativo. Per maggiori informazioni, vedi Componente <APIProvider>.

Il file app.tsx dovrebbe avere il seguente aspetto:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <h1>Hello, world!</h1>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

Se tutto va a buon fine, dovresti visualizzare l'istruzione console.log nella console del browser. Ora che l'API Maps JavaScript è caricata, puoi eseguire il rendering della mappa dinamica nel passaggio successivo.

4. Visualizzare una mappa

È ora di visualizzare la tua prima mappa.

La parte più utilizzata dell'API Maps JavaScript è google.maps.Map, ovvero la classe che consente di creare e manipolare le istanze della mappa. La libreria vis.gl/react-google-map racchiude questa classe nel componente Map. Innanzitutto, importa i corsi Map e MapCameraChangedEvent.

import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

Il componente Map supporta una serie di impostazioni diverse per la mappa. Per questo codelab, utilizzerai le seguenti impostazioni:

defaultCenter, che imposta la latitudine e la longitudine del centro della mappa.
defaultZoom, che imposta il livello di zoom iniziale della mappa.
Per visualizzare una mappa, inserisci il seguente codice all'interno dei tag APIProvider per centrare la mappa su Sydney, in Australia, e impostare un livello di zoom pari a 13, che è il livello di zoom corretto per mostrare il centro città:

 <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
</Map>

Ora dovresti vedere una mappa di Sydney nel browser:

Ricapitolando, in questa sezione hai visualizzato una mappa con il componente <Map> e ne hai impostato lo stato iniziale con le proprietà. Hai anche utilizzato gli eventi per registrare il momento in cui la videocamera è cambiata.

Il file app.tsx dovrebbe avere il seguente aspetto:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
   </Map>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

5. Aggiungere la personalizzazione delle mappe basata su cloud

Un ID mappa è un requisito per utilizzare gli indicatori avanzati, che utilizzi per contrassegnare i punti d'interesse sulla mappa di Sydney. Un ID mappa viene utilizzato anche per la personalizzazione delle mappe basata su cloud.

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.

Per utilizzare l'ID mappa che hai creato, imposta la proprietà mapId del componente <Map>:

<Map
    defaultZoom={13}
    defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
    mapId='DEMO_MAP_ID'
    onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
    }>
</Map>

Dovresti vedere lo stile che hai selezionato sulla mappa.

6. Aggiungere indicatori alla mappa

Gli sviluppatori possono fare 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 UI comune per gestire l'interazione degli utenti. Se hai già utilizzato Google Maps, probabilmente conosci il marcatore predefinito, che ha questo aspetto:

Per utilizzare il componente AdvancedMarker per inserire indicatori sulla mappa:

Crea un elenco di oggetti per rappresentare i punti di interesse nell'area di Sydney, posizionalo subito sotto le importazioni, al di fuori della definizione di App:

type Poi ={ key: string, location: google.maps.LatLngLiteral }
const locations: Poi[] = [
  {key: 'operaHouse', location: { lat: -33.8567844, lng: 151.213108  }},
  {key: 'tarongaZoo', location: { lat: -33.8472767, lng: 151.2188164 }},
  {key: 'manlyBeach', location: { lat: -33.8209738, lng: 151.2563253 }},
  {key: 'hyderPark', location: { lat: -33.8690081, lng: 151.2052393 }},
  {key: 'theRocks', location: { lat: -33.8587568, lng: 151.2058246 }},
  {key: 'circularQuay', location: { lat: -33.858761, lng: 151.2055688 }},
  {key: 'harbourBridge', location: { lat: -33.852228, lng: 151.2038374 }},
  {key: 'kingsCross', location: { lat: -33.8737375, lng: 151.222569 }},
  {key: 'botanicGardens', location: { lat: -33.864167, lng: 151.216387 }},
  {key: 'museumOfSydney', location: { lat: -33.8636005, lng: 151.2092542 }},
  {key: 'maritimeMuseum', location: { lat: -33.869395, lng: 151.198648 }},
  {key: 'kingStreetWharf', location: { lat: -33.8665445, lng: 151.1989808 }},
  {key: 'aquarium', location: { lat: -33.869627, lng: 151.202146 }},
  {key: 'darlingHarbour', location: { lat: -33.87488, lng: 151.1987113 }},
  {key: 'barangaroo', location: { lat: - 33.8605523, lng: 151.1972205 }},
];

const App = () => (
  ...
);

Personalizza i tuoi pin con l'elemento <Pin>:

<Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />

Crea un componente personalizzato per eseguire il rendering dell'elenco con i marcatori avanzati, posizionalo sotto la definizione di App:

const App = () => (
  ...
);

const PoiMarkers = (props: {pois: Poi[]}) => {
  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}>
        <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

Aggiungi il componente PoiMarkers come elemento secondario del componente Map:

<Map
  ... map properties ...
>
  <PoiMarkers pois={locations} />
</Map>

Infine, aggiungi Pin e AdvancedMarker alle importazioni.

import {
  APIProvider,
  Map,
  AdvancedMarker,
  MapCameraChangedEvent,
  Pin
} from '@vis.gl/react-google-maps';

Dovresti vedere gli indicatori avanzati personalizzati sulla mappa:

7. 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 della libreria MarkerClustererPlus su GitHub.

Per attivare il raggruppamento dei marcatori:

Nella parte superiore del file app.tsx, aggiorniamo e aggiungiamo i tipi di importazione e di supporto alla nostra libreria.

import React, {useEffect, useState, useRef, useCallback} from 'react';
import {createRoot} from "react-dom/client";
import {
    APIProvider,
    Map,
    AdvancedMarker,
    MapCameraChangedEvent,
    useMap,
    Pin
  } from '@vis.gl/react-google-maps';
  import {MarkerClusterer} from '@googlemaps/markerclusterer';
  import type {Marker} from '@googlemaps/markerclusterer';

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.

Crea variabili per MarkerClusterer e gli elementi di supporto nel componente PoiMarkers.

Per inizializzare MarkerClusterer, devi disporre di un'istanza della mappa. Recupera l'istanza dall'hook useMap():

const map = useMap();

Crea un elenco di indicatori memorizzati in una variabile di stato:

const [markers, setMarkers] = useState<{[key: string]: Marker}>({});

Memorizza il clusterer come riferimento:

const clusterer = useRef<MarkerClusterer | null>(null);

Sempre nel componente PoiMarkers, crea un'istanza di MarkerClusterer e trasmettila all'istanza di Map in cui vuoi che vengano visualizzati i cluster di marcatori:

 useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

Crea un effetto che aggiorni il clusterer quando l'elenco dei marcatori cambia:

useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

Crea una funzione per generare riferimenti per i nuovi indicatori:

const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

Utilizza questo metodo nell'elemento AdvancedMarker per creare il riferimento per ogni marcatore.

<AdvancedMarker
  key={poi.key}
  position={poi.location}
  ref={marker => setMarkerRef(marker, poi.key)}
  >
    <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
</AdvancedMarker>

Ora dovresti vedere i cluster di marcatori sulla mappa:

Se aumenti e diminuisci lo zoom, MarkerClustererPlus numera 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 questa sezione hai importato la libreria di utilità open source MarkerClustererPlus e l'hai utilizzata per creare un'istanza di MarkerClusterer che, con l'aiuto dello stato e dei riferimenti di React, ha raggruppato automaticamente i marcatori creati nel passaggio precedente.

Il componente PoiMarkers dovrebbe avere il seguente aspetto:

const PoiMarkers = (props: { pois: Poi[] }) => {
  const map = useMap();
  const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  const clusterer = useRef<MarkerClusterer | null>(null);

  // Initialize MarkerClusterer, if the map has changed
  useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

  // Update markers, if the markers array has changed
  useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

  const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

Successivamente, imparerai a gestire l'interazione degli utenti.

8. Aggiungere l'interazione utente

Ora hai una mappa dall'aspetto fantastico che mostra alcune delle destinazioni turistiche più popolari di Sydney. In questa sezione, aggiungi un'ulteriore gestione delle interazioni degli utenti con 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 sui marker, lo spostamento della visualizzazione della mappa, lo zoom avanti e indietro e altro ancora.

Per aggiungere un listener click ai tuoi indicatori e poi eseguire la panoramica della mappa in modo programmatico in modo che l'indicatore su cui è stato fatto clic venga visualizzato al centro della mappa, segui questi passaggi:

Crea un callback del gestore click.

Nel componente PoiMarkers, definisci un gestore click con useCallback() di React.

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 ottenute la latitudine e la longitudine, passale alla funzione panTo() integrata dell'istanza Map per far sì che la mappa si sposti in modo fluido per ricentrarsi sul marker cliccato aggiungendo quanto segue nella funzione di callback del gestore eventi:

const PoiMarkers = (props: { pois: Poi[] }) => {
...
const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    if(!map) return;
    if(!ev.latLng) return;
    console.log('marker clicked:', ev.latLng.toString());
    map.panTo(ev.latLng);
  });
...
};

Assegna i gestori click ai marcatori.

Gli elementi AdvancedMarker della libreria vis.gl/react-google-map espongono due proprietà utili per la gestione dei clic:

clickable: se è true, AdvancedMarker sarà selezionabile e attiverà l'evento gmp-click e sarà interattivo per scopi di accessibilità. Ad esempio, consentirà la navigazione da tastiera con i tasti freccia.
onClick: la funzione di callback da chiamare quando si verifica un evento click.

Aggiorna il rendering di PoiMarkers per assegnare un gestore click a ogni marcatore:

return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          ... other properties ...
          clickable={true}
          onClick={handleClick}
          >
           ...
        </AdvancedMarker>
      ))}
    </>
  );

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

Ricapitolando, in questa sezione hai utilizzato il sistema di eventi di React per assegnare un gestore click a tutti i marcatori sulla mappa, hai recuperato la latitudine e la longitudine del marcatore dall'evento click attivato e le hai utilizzate per ricentrare la mappa ogni volta che viene fatto clic su un marcatore.

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

9. 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. Nell'ultimo passaggio di questo codelab, utilizzi 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 selezionato. In questo modo, l'utente può capire 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. La libreria vis.gl/react-google-map ti mette a disposizione queste funzionalità in React.

Poi, esegui il rendering di un cerchio per mostrare un raggio di 800 metri (circa mezzo miglio) attorno a un indicatore quando viene fatto clic.

Il repository iniziale contiene un componente personalizzato per un elemento circle. Puoi trovarlo nel file src/components/circle.tsx.

Per consentire agli utenti di disegnare sulla mappa:

Aggiorna le importazioni in modo da includere il componente Cerchio fornito.

import {Circle} from './components/circle'

Crea una variabile di stato per il centro del cerchio.

Acquisisci lo stato del centro del cerchio nel componente PoiMarkers. Imposta lo stato iniziale su null e sfrutta il fatto che un cerchio non viene visualizzato a meno che non abbia una posizione centrale (e un raggio) validi.

const PoiMarkers = (props: { pois: Poi[] }) => {
...
  const [circleCenter, setCircleCenter] = useState(null)
...
};

Aggiorna il centro del cerchio quando viene gestito un evento click.

Chiama setCircleCenter con la posizione trovata nell'oggetto evento:

const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    ...
    setCircleCenter(ev.latLng);
  });

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, imposta le proprietà dell'elemento cerchio, come colore e spessore del tratto, dove deve essere centrato il cerchio e il suo raggio.

Aggiungi un cerchio al rendering e associa il centro alla variabile di stato. Il rendering dovrebbe avere il seguente aspetto:

return (
    <>
      <Circle
          radius={800}
          center={circleCenter}
          strokeColor={'#0c4cb3'}
          strokeOpacity={1}
          strokeWeight={3}
          fillColor={'#3b82f6'}
          fillOpacity={0.3}
        />
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          clickable={true}
          onClick={handleClick}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

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

10. Complimenti

Hai creato la tua prima app web con la libreria vis.gl/react-google-map per Google Maps Platform, tra cui il caricamento dell'API Maps JavaScript, il caricamento di una mappa, l'utilizzo di indicatori, il controllo e il disegno sulla mappa e l'aggiunta dell'interazione dell'utente.

Per visualizzare il codice completato, consulta la directory /solutions.