Panoramica
Google Maps Platform è disponibile per web (JS, TS), Android e iOS e offre anche API di servizi web per ottenere informazioni su luoghi, indicazioni e distanze. Gli esempi di questa guida sono scritti per una piattaforma, ma vengono forniti link alla documentazione per l'implementazione su altre piattaforme.
Quando gli utenti vedono i tuoi prodotti online, vogliono trovare il modo migliore e più comodo per ricevere il loro ordine. La guida all'implementazione e i suggerimenti per la personalizzazione dello strumento di ricerca dei prodotti sono ciò che Google consiglia come combinazione ottimale di API Google Maps Platform per creare esperienze utente efficaci per lo strumento di ricerca dei prodotti.
Seguendo questa guida all'implementazione, puoi aiutare i clienti a visualizzare le informazioni dettagliate di cui hanno bisogno per trovare i tuoi prodotti e fornire loro indicazioni stradali per raggiungere il negozio che ha l'articolo che cercano, che si tratti di auto, bicicletta, a piedi o con i mezzi pubblici.
Abilita API
Per implementare Product Locator, devi abilitare le seguenti API nella console Google Cloud. I seguenti link ipertestuali ti reindirizzano alla console Google Cloud per attivare ogni API per il progetto selezionato:
Per ulteriori informazioni sulla configurazione, consulta Inizia a utilizzare Google Maps Platform.
Sezioni della guida all'implementazione
Di seguito sono riportate le implementazioni e le personalizzazioni trattate in questo articolo:
- L'icona del segno di spunta è un passaggio di implementazione fondamentale.
- L'icona a forma di stella è una personalizzazione facoltativa ma consigliata per migliorare la soluzione.
| Associare le sedi dei negozi ai luoghi di Google Maps Platform | Abbina la posizione di un negozio a un luogo in Google Maps Platform. | |
| Identificare la posizione dell'utente | Aggiungi la funzionalità di digitazione in tempo reale per migliorare l'esperienza utente su tutte le piattaforme e migliorare l'accuratezza degli indirizzi con il minimo numero di tasti premuti. | |
| Identificare i negozi più vicini | Calcola la distanza e il tempo di percorrenza per più origini e destinazioni, specificando facoltativamente varie forme di trasporto come a piedi, in auto, con il trasporto pubblico o in bicicletta. | |
| Visualizzare le informazioni sul datastore | Mostra informazioni dettagliate sui tuoi negozi, in modo che gli utenti possano raggiungerli più facilmente. | |
| Fornire indicazioni stradali per la navigazione | Ottieni dati sulle indicazioni stradali dall'origine alla destinazione utilizzando varie forme di trasporto, come a piedi, in auto, in bicicletta e con il trasporto pubblico. | |
| Inviare indicazioni stradali al dispositivo mobile | Oltre a mostrare le indicazioni sulla tua pagina web, puoi anche inviarle allo smartphone di un utente per la navigazione con Google Maps ovunque si trovi. | |
| Mostrare le sedi su una mappa interattiva | Crea indicatori personalizzati per mettere in evidenza le tue sedi e personalizza la mappa in modo che corrisponda ai colori del tuo brand. Mostra (o nascondi) punti di interesse (PDI) specifici sulla mappa per aiutare gli utenti a orientarsi meglio e controllare la densità dei PDI per evitare che la mappa sia troppo affollata. | |
| Combinare dati sulla posizione personalizzati con i dettagli sui luoghi | Combina i tuoi dettagli personalizzati sulla posizione con i dettagli del luogo per fornire agli utenti un ricco insieme di dati per prendere decisioni. |
Associare le sedi dei negozi ai luoghi di Google Maps Platform
Recuperare gli ID luogo
| Questo esempio utilizza: API Places (New) | Disponibile anche: JavaScript |
Potresti avere un database dei tuoi negozi con informazioni di base come il nome
della sede, l'indirizzo e il numero di telefono e vuoi associarlo
a un luogo in Google Maps Platform come insieme di destinazioni finali in cui i tuoi
utenti possono ritirare i prodotti. Per recuperare le informazioni
che Google Maps Platform ha su quel luogo, incluse le coordinate
geografiche e le informazioni fornite dagli utenti, trova l'ID luogo
che corrisponde a ciascuno dei negozi nel tuo database.
Puoi effettuare una chiamata all'endpoint
Text Search (New) in Places API (New) e richiedere solo il campo places.id nella maschera del campo (che attiva lo SKU Text Search Essentials IDs Only).
Di seguito è riportato un esempio di richiesta dell'ID luogo per l'ufficio Google di Londra:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'Puoi memorizzare questo ID luogo nel tuo database insieme al resto dei dati del negozio e utilizzarlo come modo efficiente per richiedere informazioni sul negozio. Di seguito sono riportate le istruzioni per utilizzare l'ID luogo per eseguire il geocoding, recuperare i dettagli del luogo e richiedere indicazioni stradali per raggiungere il luogo.
Geocodifica le tue sedi
| Questo esempio utilizza: API Geocoding | Disponibile anche: JavaScript |
Se il tuo database di negozi contiene indirizzi stradali, ma non coordinate geografiche, utilizza l'API Geocoding per ottenere la latitudine e la longitudine di quell' indirizzo al fine di calcolare quali negozi sono più vicini al tuo cliente. Puoi geocodificare il negozio lato server, memorizzare le latitudini e le longitudini nel database e aggiornare almeno ogni 30 giorni.
Ecco un esempio di utilizzo dell'API Geocoding per ottenere la latitudine e la longitudine dell'ID luogo restituito per la sede di Google a Londra:
```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```
Identificare la posizione dell'utente
| Questo esempio utilizza: Places Autocomplete nell'API Maps JavaScript | Disponibile anche: Android | iOS |
Un componente chiave di Product Locator è l'identificazione della posizione iniziale dell'utente. Puoi offrire all'utente due opzioni per specificare la posizione di partenza: digitare l'origine della ricerca o concedere le autorizzazioni per la geolocalizzazione del browser web o per i servizi di localizzazione mobile.
Gestire le voci digitate utilizzando il completamento automatico
Gli utenti di oggi sono abituati alla funzionalità di digitazione anticipata del completamento automatico nella versione consumer di Google Maps. Questa funzionalità può essere integrata in qualsiasi applicazione utilizzando le librerie Places di Google Maps Platform su dispositivi mobili e sul web. Quando un utente digita un indirizzo, il completamento automatico compila il resto tramite l'utilizzo di widget. Puoi anche fornire la tua funzionalità di completamento automatico utilizzando direttamente l'API Place Autocomplete Data.
Nell'esempio seguente, aggiungi le librerie Places e Marker al tuo sito
aggiungendo il parametro libraries=places,marker all'URL dello script dell'API Maps JavaScript.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>Successivamente, aggiungi un elemento contenitore alla pagina in cui verrà aggiunto il widget
PlaceAutocompleteElement:
<div id="autocomplete-container"></div>Infine, inizializza il widget PlaceAutocompleteElement e aggiungilo
al contenitore. Limitare le
previsioni di
completamento automatico di Place
con includedPrimaryTypes: ["geocode"] configura il widget in modo che
accetti indirizzi stradali, quartieri, città e codici postali in modo che gli utenti possano inserire
qualsiasi livello di specificità per descrivere la loro origine. Quando un utente seleziona una previsione, viene attivato l'evento gmp-select e puoi chiamare place.fetchFields() per richiedere il campo location contenente la latitudine e la longitudine dell'origine dell'utente. Utilizzerai queste coordinate
della mappa per indicare la relazione tra le tue sedi e l'origine.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // fetch the place details and search for the nearest stores. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["id", "location", "formattedAddress"], }); searchFromOrigin(place); }); }
In questo esempio, una volta selezionato l'indirizzo, viene avviata la funzione
searchFromOrigin(). Viene presa la posizione del risultato corrispondente che è la posizione dell'utente, quindi vengono cercate le posizioni più vicine in base a queste coordinate come origine, come descritto nella sezione Identificare i negozi più vicini.
Espandi questa sezione per visualizzare le procedure dettagliate video per aggiungere il completamento automatico dei luoghi alla tua app:
Sito web
App Android
App per iOS
Utilizzare la geolocalizzazione del browser
Per richiedere e gestire la geolocalizzazione del browser HTML5, scopri come attivare una finestra Usa la mia posizione:
Identificare i negozi più vicini
| Questo esempio utilizza: Libreria Routes, API Maps JavaScript | Disponibile anche: API Routes |
Una volta ottenuta la posizione dell'utente, puoi confrontarla con le posizioni dei tuoi negozi. Se lo fai con la
classe RouteMatrixnella libreria Routes, API Maps JavaScript (o con la
funzionalità Compute Route
Matrix nell'API Routes), gli utenti possono selezionare la
posizione più comoda per loro in base al tempo di guida o alla distanza stradale.
Il modo standard di organizzare un elenco di località è ordinarle per distanza. Spesso questa distanza viene calcolata semplicemente utilizzando la linea retta da un utente alla posizione, ma questo può essere fuorviante. La linea retta potrebbe passare sopra un fiume impraticabile o attraverso strade trafficate in un momento in cui un'altra posizione potrebbe essere più comoda. Ciò è importante quando hai più sedi a pochi chilometri di distanza l'una dall'altra.
Il metodo RouteMatrix.computeRouteMatrix funziona prendendo un elenco di
località di partenza e destinazione e restituendo non solo la distanza di viaggio, ma
anche il tempo di percorrenza tra le due località. Nel caso di un utente, l'origine sarebbe la sua posizione attuale o il punto di partenza desiderato, mentre le destinazioni sarebbero le posizioni. Le origini e le destinazioni possono essere specificate come
coppie di coordinate, ID luogo o indirizzi. Puoi utilizzare
RouteMatrix.computeRouteMatrix con le preferenze di routing, ad esempio
TRAFFIC_AWARE, per mostrare i risultati in base ai tempi di guida attuali o futuri.
Il seguente esempio chiama RouteMatrix.computeRouteMatrix nella
libreria Routes, API Maps JavaScript, specificando l'origine dell'utente e fino a 25 sedi di negozi
alla volta.
async function getDistances(originLocation) { const { RouteMatrix } = await google.maps.importLibrary("routes"); const request = { origins: [originLocation], destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, routingPreference: "TRAFFIC_AWARE", fields: ["distanceMeters", "durationMillis", "condition"], }; return RouteMatrix.computeRouteMatrix(request); } function update(location) { if (!location) { return; } // ... // sort by spherical distance stores.sort((a, b) => { return ( google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(a.location), location ) - google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(b.location), location ) ); }); // display travel distance and time getDistances(location) .then(({ matrix }) => { const items = matrix.rows[0].items; for (let i = 0; i < items.length; i++) { if (items[i].condition === "ROUTE_EXISTS") { stores[i].travelDistance = items[i].distanceMeters; stores[i].travelDuration = items[i].durationMillis; } } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
Per ogni località nelle vicinanze, puoi visualizzare lo stato delle scorte del prodotto in base al tuo database dell'inventario.
Visualizzare le informazioni sul negozio
| Questo esempio utilizza: Libreria Places, API Maps JavaScript | Disponibile anche: Places SDK for Android | Places SDK for iOS | API Places (nuova) |
Puoi condividere dettagli avanzati del luogo, come dati di contatto, orari di apertura e stato di apertura attuale, per aiutare i clienti a scegliere la sede che preferiscono o a finalizzare l'ordine.
Dopo aver effettuato una chiamata all'API Maps JavaScript per ottenere i dettagli del luogo, puoi filtrare e visualizzare la risposta.
Per richiedere i dettagli del luogo, devi disporre dell'ID luogo di ciascuna delle tue sedi. Consulta Recuperare gli ID luogo per recuperare l'ID luogo della tua posizione.
La seguente richiesta di dettagli del luogo utilizza la classe Place per restituire nome, coordinate, sito web, numero di telefono, valutazione e orari per l'ID luogo di Google Londra:
const place = new google.maps.places.Place({ id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', });await place.fetchFields({ fields: [ 'displayName', 'nationalPhoneNumber', 'location', 'regularOpeningHours', 'rating', 'utcOffsetMinutes', 'websiteURI', ], });
createMarker(place);
Migliorare il locator di prodotti
A seconda delle esigenze della tua attività o degli utenti, puoi migliorare ulteriormente l'esperienza degli utenti.
Fornire indicazioni stradali per la navigazione
| Questo esempio utilizza: Libreria Routes, API Maps JavaScript | Disponibile anche: API Routes servizio web da utilizzare su Android e iOS, direttamente dall'applicazione o da remoto tramite un proxy server |
Quando mostri agli utenti le indicazioni stradali all'interno del tuo sito o delle tue applicazioni, gli utenti non devono uscire dal tuo sito e distrarsi con altre pagine o vedere i concorrenti sulla mappa. Con l'API Routes puoi anche richiedere percorsi ecosostenibili per stimare il consumo di carburante o energia e mostrare l'impatto ambientale di un viaggio.
La Route
classe nella libreria Routes, API Maps JavaScript, ha anche metodi come
createPolylines() e
createWaypointAdvancedMarkers() che ti consentono di elaborare i risultati
e visualizzarli su una mappa.
Di seguito è riportato un esempio di richiesta e visualizzazione di un percorso su una mappa. Per saperne di più sull'esempio, consulta Ottenere un itinerario.
Inviare indicazioni stradali al dispositivo mobile
Per consentire agli utenti di raggiungere più facilmente una località, puoi inviare loro un messaggio o un'email con un link alle indicazioni stradali. Quando l'utente fa clic, l'app Google Maps si avvia sul suo smartphone, se è installata, oppure maps.google.com si carica nel browser web del dispositivo. Entrambe queste esperienze offrono all'utente la possibilità di utilizzare la navigazione passo passo, inclusa la guida vocale, per raggiungere la destinazione.
Utilizza gli
URL di Maps per comporre un URL di indicazioni stradali come il seguente, con
il nome del luogo codificato come URL come parametro destination e l'ID
luogo come parametro destination_place_id. Non sono previsti costi per
comporre o utilizzare gli URL di Maps, pertanto non è necessario includere una chiave API
nell'URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Puoi fornire facoltativamente un parametro di query origin utilizzando lo stesso
formato dell'indirizzo della destinazione. Se lo ometti, le indicazioni stradali iniziano dalla posizione attuale dell'utente, che potrebbe essere diversa da quella in cui utilizzava l'app Trova prodotto.
Gli URL di Maps forniscono opzioni aggiuntive per i parametri di query, come travelmode e dir_action=navigate, per avviare le indicazioni stradali con la navigazione attivata.
Questo link selezionabile, che estende l'URL dell'esempio precedente, imposta
origin come stadio di calcio di Londra e utilizza
travelmode=transit per fornire indicazioni sul trasporto pubblico per la
destinazione.
Per inviare un messaggio o un'email contenente questo URL, al momento ti consigliamo di utilizzare un'applicazione di terze parti come Twilio. Se utilizzi App Engine, puoi utilizzare società terze per inviare SMS o email. Per saperne di più, consulta Invio di messaggi con servizi di terze parti.
Mostrare le tue sedi su una mappa interattiva
Utilizzare mappe dinamiche
| Questo esempio utilizza: API Maps JavaScript | Disponibile anche per: Android | iOS |
Un localizzatore è una parte importante dell'esperienza utente. Alcuni siti, tuttavia, potrebbero non avere nemmeno una semplice mappa, costringendo gli utenti a uscire dal sito o dall'app per trovare una località nelle vicinanze. Ciò significa un'esperienza non ottimale per gli utenti che devono navigare tra le pagine per ottenere le informazioni di cui hanno bisogno. Puoi invece migliorare questa esperienza incorporando e personalizzando le mappe nelle tue applicazioni.
Aggiungere una mappa dinamica alla tua pagina, ovvero una mappa che gli utenti possono spostare, ingrandire e rimpicciolire e ottenere dettagli su diverse località e punti di interesse, può essere fatto con poche righe di codice.
Per prima cosa, devi includere l'API Maps JavaScript nella pagina.
A questo scopo, collega il seguente script alla tua pagina HTML, incluso
libraries=marker, in modo da poter aggiungere
indicatori
avanzati alla mappa.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>L'URL fa riferimento alla funzione JavaScript initMap che viene eseguita quando la pagina viene caricata. Nell'URL puoi anche definire la lingua o la regione della mappa per assicurarti che sia formattata nel modo corretto per il paese specifico che scegli come target. L'impostazione di una regione garantisce inoltre che
il comportamento delle app utilizzate al di fuori degli Stati Uniti sia orientato verso la
regione che hai impostato. Consulta i Dettagli della copertura di Google Maps Platform
per un elenco completo delle lingue e delle regioni supportate e scopri di più sull'utilizzo dei parametri
region.
Successivamente, devi inserire un div HTML per posizionare la mappa sulla pagina.
Questo è il punto in cui verrà visualizzata la mappa.
<div id="map"></div>Il passaggio successivo consiste nell'impostare la funzionalità di base della mappa. Questa operazione viene eseguita nella
funzione di script initMap specificata nell'URL dello script. In questo script,
mostrato nell'esempio seguente, puoi impostare la posizione iniziale, un
ID mappa (obbligatorio
per gli indicatori avanzati e la personalizzazione delle mappe basata su cloud),
il tipo di mappa e
i controlli disponibili sulla mappa per gli utenti. Tieni presente che
getElementById() fa riferimento all'ID "mappa" div
precedente.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
Per un localizzatore, in genere ti interessa impostare la posizione iniziale, il punto centrale o i limiti e il livello di zoom (quanto la mappa è ingrandita su quella posizione). La maggior parte degli altri elementi, come la regolazione dei controlli, è facoltativa in quanto determini il livello di interazione con la mappa.
Personalizza la mappa
Puoi modificare l'aspetto e i dettagli della mappa in diversi modi. Ad esempio, puoi:
- Crea indicatori personalizzati per sostituire i segnaposto predefiniti.
- Modifica i colori degli elementi della mappa in modo che riflettano il tuo brand.
- Controlla quali punti di interesse visualizzare (attrazioni, cibo, alloggi e così via) e con quale densità, in modo da concentrare l'attenzione degli utenti sulle tue sedi, evidenziando i punti di riferimento che aiutano gli utenti a raggiungere la sede più vicina.
Crea indicatori per mappe personalizzate
Puoi personalizzare i marker avanzati modificando lo sfondo, il bordo o il colore del glifo del segnaposto predefinito (ad esempio per indicare se una località è attualmente aperta), sostituendo il marker con un'immagine grafica personalizzata, ad esempio il logo del tuo brand, o creando marker HTML e CSS personalizzati. Le finestre informative, o finestre popup, possono fornire informazioni aggiuntive agli utenti, come orari di apertura, numero di telefono o foto.
Di seguito è riportata una mappa di esempio che utilizza indicatori grafici personalizzati. (Vedi il codice sorgente nell' argomento Marcatore grafico personalizzato dell'API Maps JavaScript.)
Per informazioni dettagliate, consulta la documentazione sui marcatori avanzati per JavaScript (web), Android e iOS.
Definizione dello stile della mappa
Google Maps Platform ti consente di personalizzare lo stile della mappa in modo da aiutare gli utenti a trovare la posizione più vicina, raggiungerla il più rapidamente possibile e rafforzare il tuo brand. Ad esempio, puoi modificare i colori della mappa in base al tuo brand e puoi ridurre le distrazioni sulla mappa controllando i punti di interesse visibili agli utenti. Google Maps Platform fornisce anche una serie di modelli iniziali di mappe, alcuni dei quali sono ottimizzati per diversi settori, come viaggi, logistica, immobiliare e vendita al dettaglio.
Puoi creare o modificare gli stili di mappa nella pagina Stili mappa della console Google Cloud del tuo progetto.
Espandi per visualizzare le animazioni della creazione e dello stile di mappa nella console Cloud:
Stili di mappa per settore
Questa animazione mostra gli stili di mappa predefiniti specifici per settore che puoi utilizzare. Questi stili forniscono un punto di partenza ottimale per ogni tipo di settore. Ad esempio, lo stile di mappa Retail riduce i punti d'interesse sulla mappa, consentendo agli utenti di concentrarsi sulle tue sedi, nonché sui punti di riferimento per aiutarli a raggiungere la sede più vicina nel modo più rapido e sicuro possibile.
Controllo dei punti d'interesse
Questa animazione imposta il colore del marcatore per i punti di interesse e aumenta la densità dei PDI nello stile della mappa. Maggiore è la densità, più indicatori di punti di interesse vengono visualizzati sulla mappa.
Ogni stile di mappa ha un proprio ID. Dopo aver pubblicato uno stile di mappa nella console Cloud, fai riferimento a questo ID mappa nel codice, il che significa che puoi aggiornare uno stile di mappa in tempo reale senza eseguire il refactoring dell'app. Il nuovo aspetto verrà visualizzato automaticamente nell'applicazione esistente e verrà utilizzato su tutte le piattaforme. I seguenti esempi mostrano come aggiungere un ID mappa a una pagina web utilizzando l'API Maps JavaScript.
Se includi uno o più map_ids nell'URL dello script, l'API Maps JavaScript rende automaticamente disponibili questi stili per un rendering più rapido della mappa quando li richiami nel codice.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>Il seguente codice mostra una mappa con stile nella pagina web. (Non viene mostrato un elemento HTML
<div id="map"></div> in cui la mappa verrà visualizzata
nella pagina.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Scopri di più sull'incorporamento della personalizzazione delle mappe basata su cloud in JavaScript (web), Android e iOS.
Combinare dati sulla posizione personalizzati con Place Details
La sezione precedente Mostra le tue sedi su una mappa interattiva descrive l'utilizzo di Place Details per fornire agli utenti un livello elevato di informazioni sulle tue sedi, come orari di apertura, foto e recensioni.
È utile comprendere i livelli di prezzi e SKU dei diversi campi di dati nell'API Places (New). Per gestire i costi, una strategia consiste nel combinare le informazioni che già possiedi sulle tue sedi con le informazioni aggiornate di Google Maps, come chiusure temporanee, orari festivi e valutazioni, foto e recensioni degli utenti. Se hai già i dati di contatto dei tuoi negozi, non devi richiedere questi campi da Place Details e puoi vincolare la maschera del campo per recuperare solo i campi che vuoi visualizzare.
Potresti avere i tuoi dati sui luoghi da integrare o utilizzare al posto di Place Details. Il codelab per il localizzatore full-stack fornisce un esempio di utilizzo di GeoJSON con un database per archiviare e recuperare i dettagli della tua posizione.