Panoramica
Google Maps Platform è disponibile per il web (JS, TS), Android e iOS e offre anche API di servizi web per ottenere informazioni su luoghi, indicazioni stradali e distanze. Gli esempi in questa guida sono scritti per una piattaforma, ma sono disponibili link alla documentazione per l'implementazione su altre piattaforme.
Builder rapido nella console Google Cloud ti consente di creare rapidamente un locator, che include l'importazione di schede di Profilo dell'attività e l'incorporamento automatico di link di prenotazione degli appuntamenti da fornitori di terze parti. La UI interattiva consente di generare codice ed eseguirne il deployment in Cloud in pochi minuti.
I tuoi utenti vogliono cercare prodotti e servizi online e trovare il luogo migliore e più comodo da visitare, fissare un appuntamento o ritirare un ordine. Vogliono raggiungere la tua sede il più rapidamente possibile e vuoi offrire loro esperienze online avanzate che aumentino le visite alle tue sedi fisiche, rafforzi la soddisfazione degli utenti e riducano le chiamate di assistenza. Vuoi anche misurare l'efficacia del localizzatore per determinare se i clienti possono trovare la tua sede e vuoi capire dove apportare miglioramenti.
Locator Plus, le indicazioni e i suggerimenti per la personalizzazione forniti in questo argomento, è la combinazione ottimale per le API di Google Maps Platform per creare esperienze utente di localizzazione eccezionali. Seguendo queste pratiche, puoi aiutare gli utenti a trovare le tue sedi su una mappa, visualizzare informazioni dettagliate di cui hanno bisogno per prendere decisioni e fornire loro indicazioni stradali quando si trovano in auto, in bicicletta, a piedi o con il trasporto pubblico.
Per gli utenti di Locator Plus, una dashboard di analisi consente di analizzare e generare approfondimenti dai dati, offrendo un'immagine chiara dell'efficacia con cui i clienti interagiscono con il tuo Store locator. Per accedere a questo report, vai alla sezione Report sul coinvolgimento della console. Per maggiori dettagli su questo report, consulta Report Coinvolgimento.
Il seguente diagramma mostra le API principali coinvolte nell'implementazione di Locator Plus. Il diagramma mostra anche un database dei dati sulla tua posizione che puoi combinare con Place Details per fornire agli utenti il set di informazioni migliore e più completo possibile. (Fai clic per ingrandire.)
![Sul lato sinistro del diagramma, un browser web visualizza una mappa con un popup Place Details.
A destra del diagramma, un elenco di API che offrono funzionalità diverse:
API Maps JavaScript per la visualizzazione e i contenuti della posizione, lo stile della mappa, gli indicatori
mappa, le immagini Street View personalizzate e la visualizzazione dei percorsi. Posiziona il completamento automatico per
il completamento degli indirizzi e la funzionalità type-ahead. API Places e Geocoding per
la posizione degli indirizzi. API Distance Matrix per classificare le località in base a distanza, tempo e modalità di viaggio. API Directions per mostrare un percorso in base al tempo di percorrenza e alla modalità di viaggio.
Al centro del diagramma, un'icona del datastore che rappresenta i punti dati delle sedi personalizzate punta verso l'icona di un server web con una freccia a due punte che indica la lettura e la scrittura dei dati tra il server web e il datastore. Le frecce tra il browser web e le API passano attraverso il server web come intermediari.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/locator_arch_diagram.png?authuser=5&hl=it)
Abilitazione delle API in corso…
Per implementare queste pratiche, devi abilitare le API seguenti nella console Google Cloud: Per saperne di più sulla configurazione, consulta Guida introduttiva all'utilizzo di Google Maps Platform.Sezioni relative all'implementazione
Di seguito sono riportate le pratiche e le personalizzazioni che tratteremo in questo argomento.
- L'icona del segno di spunta è una pratica principale.
- L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata, per migliorare la soluzione.
Visualizzazione delle sedi su una mappa interattiva |
Crea una mappa che consenta agli utenti di vedere i dettagli sulla posizione, spostarsi e aumentare e diminuire lo zoom. In alternativa, esplora la soluzione Quick Builder Locator Plus per creare rapidamente una mappa, inclusa l'importazione facilmente dei dettagli dell'attività dalle schede del profilo dell'attività, l'incorporamento dei link di prenotazione degli appuntamenti e il deployment in Google Cloud Storage. |
|
Fornire i dettagli sul luogo | Dopo che gli utenti hanno trovato le sedi più vicine su una mappa, fornisci loro dettagli significativi sui luoghi per aiutarli a prendere decisioni. | |
Visualizzazione delle località da una visualizzazione a 45° | Offri agli utenti una migliore visuale della tua posizione nella vista Satellite da un'angolazione di 45°. | |
Identificare la località dell'utente | Aggiungi la funzionalità di digitazione a consumo per migliorare l'esperienza utente su tutte le piattaforme e aumentare la precisione degli indirizzi con una sequenza minima di tasti. | |
Visualizzazione del tempo di percorrenza e della distanza per i luoghi più vicini | Calcola la distanza da percorrere e il tempo di percorrenza per più luoghi di partenza e di destinazione, specificando facoltativamente diverse forme di trasporto, come a piedi, in auto o in bicicletta. | |
Aiutare gli utenti a prenotare appuntamenti |
Consenti agli utenti di prenotare un appuntamento dal riquadro laterale Place Details. In alternativa, esplora la soluzione Quick Builder Locator Plus per creare rapidamente una mappa, inclusa l'importazione facilmente dei dettagli dell'attività dalle schede del profilo dell'attività, l'incorporamento dei link di prenotazione degli appuntamenti e il deployment in Google Cloud Storage. |
|
Mostrare offerte locali | Mostra agli utenti le offerte locali cliccabili nel riquadro laterale Place Details. | |
Fornire indicazioni stradali | Ottieni dati sulle indicazioni stradali dall'origine alla destinazione utilizzando vari tipi di trasporto, ad esempio a piedi, in auto, in bicicletta e con il trasporto pubblico. | |
Personalizzazione della mappa | Crea indicatori personalizzati per mettere in risalto le tue sedi e personalizza la mappa in base ai colori del tuo brand. Visualizza (o nascondi) specifici punti d'interesse (PDI) sulla mappa per aiutare gli utenti a orientarsi meglio e controlla la densità dei PDI per mettere in ordine la mappa. | |
Ottenere insight sull'utilizzo con dati e analisi | Configura e utilizza Google Analytics per ottenere approfondimenti sulla strategia e sull'implementazione del locator. | |
Invio di indicazioni stradali al dispositivo mobile | Oltre a mostrare le indicazioni stradali sul locator, puoi anche inviare le indicazioni stradali al telefono di un utente per la navigazione utilizzando Google Maps ovunque si trovi. | |
Visualizzazione di Street View per aiutare gli utenti a visualizzare la località | Offri agli utenti immagini di Street View con visualizzazioni a 360 gradi per orientarli meglio e trovare più rapidamente le tue sedi. | |
Determinare la posizione dell'utente con la geolocalizzazione | Se non vuoi fare affidamento sui servizi di geolocalizzazione nel dispositivo, utilizza la geolocalizzazione per identificare la posizione dell'utente. | |
Combinare i dati sulla posizione personalizzati con Place Details | Combina i dettagli personalizzati della tua sede con Place Details per fornire agli utenti un set di dati completo per prendere decisioni. |
Visualizzazione delle sedi su una mappa interattiva
Il localizzatore è una parte importante dell'esperienza utente. Alcuni siti, tuttavia, potrebbero non disporre nemmeno di una mappa semplice e costringere gli utenti ad abbandonare il sito o l'app per trovare una posizione nelle vicinanze. Ciò significa che l'esperienza non è ottimale per gli utenti che devono navigare da una pagina all'altra per ottenere le informazioni di cui hanno bisogno. Puoi invece migliorare questa esperienza incorporando e personalizzando le mappe nelle tue applicazioni.
Ci sono diversi modi per attivare questa funzionalità: (1) utilizzando la soluzione Locator Plus di Builder rapido per fornire questa funzionalità pronta all'uso e (2) utilizzando la tua implementazione di Dynamic Maps. In questa sezione vengono descritte in dettaglio queste opzioni.
Utilizzo di Builder rapido Locator Plus
Puoi utilizzare la soluzione Locator Plus di Builder rapido per importare i dettagli dell'attività dal tuo profilo dell'attività. Pertanto, ora una modifica ai dettagli del tuo profilo dell'attività verrà applicata nello Store locator sul tuo sito web. ad esempio orari, dati di contatto, foto, opzioni di servizio e altro ancora. Builder rapido consente di esplorare rapidamente la configurazione delle sedi aziendali su una mappa, generare codice di cui è possibile eseguire il deployment o eseguire il deployment direttamente in Google Cloud Storage in pochi minuti.
![Integrazione del profilo dell'attività](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_gbp_integration.gif?authuser=5&hl=it)
![Eseguire il deployment in Cloud](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_deploy_to_cloud.gif?authuser=5&hl=it)
Utilizzo della propria implementazione di Dynamic Maps
In questo esempio vengono utilizzati: API Maps JavaScript | Disponibile anche: Android | iOS |
Bastano poche righe di codice per aggiungere una mappa dinamica alla tua pagina, ovvero una mappa che gli utenti possono spostare, aumentare e diminuire lo zoom e ottenere dettagli su vari luoghi e punti di interesse.
Innanzitutto, devi includere l'API Maps JavaScript nella pagina. Per farlo, devi collegare lo script seguente nella pagina HTML.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
L'URL fa riferimento alla funzione JavaScript initMap
che viene eseguita al caricamento della pagina. Nell'URL, puoi anche definire la lingua o l'area geografica della mappa per assicurarti che sia formattata nel modo corretto per il paese specifico scelto come target. L'impostazione di una regione garantisce inoltre che il comportamento delle app utilizzate al di fuori degli Stati Uniti sia influenzato dalla regione impostata. Visualizza 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, hai bisogno di un div
HTML per posizionare la mappa nella pagina.
Questo è il luogo in cui verrà visualizzata la mappa.
<div id="map"></div>
Il passaggio successivo consiste nell'impostare le funzionalità di base della mappa. Questa operazione viene eseguita nella
funzione script initMap
specificata nell'URL dello script. In questo script, mostrato nell'esempio seguente, puoi impostare la posizione iniziale, il tipo di mappa e i controlli che saranno disponibili sulla mappa per i tuoi utenti. Tieni presente che getElementById()
fa riferimento all'ID div
"mappa" in alto.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
Per un localizzatore, di solito ti interessa impostare la posizione iniziale, il punto centrale o i limiti e il livello di zoom (il livello di zoom della mappa su quella località). La maggior parte degli altri elementi, come l'ottimizzazione dei controlli, è facoltativa quando stabilisci il livello di interazione con la mappa.
Recupero degli ID dei luoghi in corso...
In questo esempio viene utilizzata: API Places | Disponibile anche: JavaScript |
Potresti avere un database delle tue sedi con informazioni di base come il nome, l'indirizzo e il numero di telefono. Per recuperare le informazioni di Google Maps
Platform sul luogo, incluse le coordinate geografiche e le informazioni
fornite dagli utenti, trova l'ID luogo corrispondente a ciascuna delle località nel tuo database. Puoi effettuare una chiamata all'
endpoint Find Place in Place Search dell'API Places e richiedere solo il campo place_id
. Ecco un esempio di richiesta dell'ID luogo per l'ufficio di Google di Londra:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
Puoi memorizzare questo ID luogo nel tuo database e utilizzarlo in modo efficiente per richiedere informazioni sul luogo. Di seguito sono riportate le istruzioni per utilizzare l'ID luogo per geocodificare, recuperare i dettagli del luogo e richiedere indicazioni stradali per raggiungere il luogo.
Geocodifica delle tue sedi
In questo esempio viene utilizzata: API Geocoding | Disponibile anche: JavaScript |
Se il database di sedi contiene indirizzi ma non coordinate geografiche, utilizza l'API Geocoding per ottenere la latitudine e la longitudine di quell'indirizzo al fine di posizionare l'indicatore sulla mappa. Puoi geocodificare i tuoi indirizzi sul lato server, archiviare le latitudini e le longitudini nel tuo database e aggiornarle almeno ogni 30 giorni.
Ecco un esempio di utilizzo dell'API Geocoding per ottenere latitudine e longitudine dell'ID luogo restituito per l'ufficio di Google di Londra:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
Aggiunta di località alla mappa
Il passaggio successivo consiste nell'aggiungere le sedi alla mappa. In genere, questo viene fatto aggiungendo indicatori alla mappa, sebbene sia possibile utilizzare una serie di altre opzioni come i livelli di dati.
Una volta individuate la latitudine e la longitudine della tua posizione, ecco un esempio di aggiunta di un indicatore alla mappa:
var marker = new google.maps.Marker({ position: { lat: 51.493073, lng: -0.146550 }, label:"A", title:"Location Name" }); // To add the marker to the map, call setMap(); marker.setMap(map);
Con pochi indicatori puoi vedere insieme la posizione di una serie di luoghi.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/maps.png?authuser=5&hl=it)
Se il numero di località è elevato, ti consigliamo di utilizzare un'utilità di clustering degli indicatori per JavaScript, Android o iOS. Ecco un esempio di clustering di indicatori nell'esempio GitHub di Store locator JavaScript.
Invio dei dettagli sul luogo
In questo esempio viene utilizzato: API Maps JavaScript | Disponibile anche: API | Android | iOS |
Puoi condividere i Place Details che gli utenti devono conoscere prima di visitare una delle tue sedi. Grazie a informazioni dettagliate su Place Details come dati di contatto, orari di apertura, valutazioni degli utenti, foto degli utenti e stato di chiusura temporanea, gli utenti sapranno esattamente cosa aspettarsi quando visitano la tua sede. Dopo aver effettuato una chiamata all'API Places, puoi filtrare ed eseguire il rendering della risposta in una finestra informativa, in una barra laterale web o in qualsiasi altro modo.
Per richiedere i dettagli del luogo, devi disporre dell'ID luogo di ciascuna delle tue sedi. Consulta la sezione Recupero degli ID luogo per recuperare l'ID della tua località.
Espandi per visualizzare i video relativi alla richiesta di Dettagli luogo:
Sapere gli orari di apertura
Controlla le chiusure
Costi sotto controllo
L'esempio seguente utilizza l'API Places Library, Maps JavaScript per recuperare Place Details e aggiungerli a una InfoWindow. Questa implementazione utilizza la strategia di risparmio sui costi che prevede l'attivazione di una richiesta Place Details solo quando l'utente richiede i dettagli facendo clic sull'indicatore, invece di recuperare preventivamente i dettagli per tutte le sedi, indipendentemente dall'interesse dell'utente.
const marker = new google.maps.Marker({ map, position: { lat: 51.493073, lng: -0.14655 }, }); const request = { placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", fields: ["name", "formatted_address", "rating", "website"], }; const infowindow = new google.maps.InfoWindow(); const service = new google.maps.places.PlacesService(map); google.maps.event.addListener(marker, "click", function () { service.getDetails(request, (place, status) => { if (status === google.maps.places.PlacesServiceStatus.OK && place) { infowindow.setContent( "<div><strong>" + place.name + "</strong><br>" + place.formatted_address + "<br>" + "Rating: " + place.rating + " stars<br>" + place.website + "</div>" ); infowindow.open(map, this); } }); });
Visualizzazione delle località da una visualizzazione a 45°
In questo esempio viene utilizzato: API Maps JavaScript | Disponibile anche: Android | iOS |
Offrire agli utenti una vista aerea della tua posizione li aiuta a farsi un'idea più chiara di come appare e a trovarli più facilmente. Quando un utente seleziona una singola località per visualizzare ulteriori dettagli, puoi aumentare lo zoom della località per visualizzare le immagini satellitari disponibili da un angolo di 45°.
Il seguente esempio di codice imposta la mappa su un livello di zoom elevato, un tipo di mappa compatibile e un angolo di inclinazione che mostrerà immagini a 45°, se disponibili. I dettagli sulla disponibilità delle immagini a 45° sono illustrati nella documentazione.
function seeDetail(location) { map.setCenter(location); map.setZoom(19); map.setMapTypeId(google.maps.MapTypeId.HYBRID); map.setTilt(45); }
Ripristino della visualizzazione mappa originale
Gli utenti spesso vogliono passare dalla visualizzazione dettagliata di una singola sede alla visualizzazione di riepilogo di più sedi nelle vicinanze e viceversa. Per facilitare questa operazione, aggiungi un
listener per rilevare quando l'utente esce dalla visualizzazione dei dettagli nelle interazioni sulla mappa o nella
visualizzazione elenco. Ad esempio, il ascolto dell'evento zoom_changed
sull'oggetto map
indica che l'utente ha diminuito manualmente lo zoom dalla visualizzazione dettagliata o ha chiamato
un'altra funzione che ha aggiornato il livello di zoom. In questo esempio, lo zoom indietro reimposta il tipo di mappa e l'inclinazione originali della mappa.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
Identificazione della località dell'utente
In questo esempio vengono utilizzati: API Maps JavaScript | Disponibile anche: Android | iOS |
Il prossimo componente fondamentale in qualsiasi localizzatore è l'identificazione della posizione di partenza dell'utente. Per impostazione predefinita, puoi utilizzare i servizi di geolocalizzazione dei dispositivi mobili e la geolocalizzazione del browser web per richiedere le autorizzazioni dell'utente e impostare l'origine come la posizione attuale dell'utente. Tuttavia, l'utente potrebbe negare queste autorizzazioni o impostare una località diversa come punto di partenza.
Gli utenti di oggi sono abituati alla funzionalità type-ahead di completamento automatico nella versione consumer di Google Maps. Questa funzionalità può essere integrata in qualsiasi applicazione utilizzando le librerie di Google Maps Platform Places sui dispositivi mobili e sul web. Quando un utente digita un indirizzo, il completamento automatico completa il resto tramite l'uso di widget. Puoi anche fornire la tua funzionalità di completamento automatico utilizzando direttamente le librerie di Places.
Per aggiungere la libreria Place Autocomplete al tuo sito è sufficiente aggiungere un paio di parametri di query all'URL dello script dell'API Maps JavaScript. Nell'esempio
seguente, l'aggiunta è libraries=places
.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
Successivamente, aggiungi una casella di testo alla pagina per l'input dell'utente.
<input id="autocomplete" placeholder="Enter starting address, city, or zip code" type="text"></input>
Infine, devi inizializzare il servizio di completamento automatico e collegarlo alla casella di testo denominata.
Se vincoli alle
previsioni di Place Autocomplete per geocodificare i tipi di codice, il campo di immissione viene configurato in modo da accettare indirizzi, quartieri, città e codici postali, in modo che gli utenti possano inserire qualsiasi livello di specificità per descrivere la loro origine. Assicurati di richiedere il campo geometry
in modo che la risposta contenga la latitudine e la longitudine dell'origine dell'utente. Utilizzerai queste coordinate della mappa per ricentrare la mappa e indicare la relazione delle tue posizioni con l'origine.
// Create the autocomplete object, restricting the search predictions to // geographical location types. const autocomplete = new google.maps.places.Autocomplete( document.getElementById("autocomplete"), { types: ["geocode"], componentRestrictions: {'country': ['gb']}, fields: ['place_id', 'geometry', 'formatted_address'] } ); // When the user selects an address from the drop-down // zoom to the select location and add a marker. autocomplete.addListener("place_changed", addUserLocation); }
In questo esempio, dopo che l'utente ha selezionato l'indirizzo, viene eseguita la funzione addUserLocation()
. Viene così scelta la geometria del risultato corrispondente, la posizione dell'utente, quindi la mappa viene spostata in quella posizione e viene aggiunto un indicatore.
function addUserLocation() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); // Add a marker to the map. const marker = new google.maps.Marker({ map: map }); marker.setLabel("C"); marker.setPosition(place.geometry.location); // Zoom the map to the marker. map.panTo(place.geometry.location); map.setZoom(12); }
Puoi quindi vedere la relazione tra l'utente e le località specifiche, come mostrato nell'immagine di seguito.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/autocomplete.png?authuser=5&hl=it)
Espandi questo testo per vedere le procedure video dettagliate sull'aggiunta di Place Autocomplete alla tua app:
Sito web
App Android
App per iOS
Visualizzazione del tempo di percorrenza e della distanza dai luoghi più vicini
Questo esempio utilizza: l'API Distance Matrix | Disponibile anche: Distance Matrix Service, API Maps JavaScript |
Una volta ottenuta la località dell'utente, puoi confrontarla con la località in cui si trovano. In questo modo, grazie al servizio Distance Matrix, l'API Maps JavaScript aiuta gli utenti a selezionare la località più comoda per loro in termini di tempo di guida o distanza su strada.
La visualizzazione delle sedi vicine a un utente implica che le tue sedi sono già state compilate. Quando utilizzi il tuo database delle località, la chiave è assicurarsi che i dati siano in un formato che possa essere utilizzato in una mappa, ad esempio GeoJSON, descritto nell'argomento Livello dati.
Il modo standard di organizzare un elenco di sedi è ordinarle in base alla distanza. Spesso questa distanza viene calcolata utilizzando la linea retta che va dall'utente al luogo, ma questo può essere fuorviante. La linea retta potrebbe essere su un fiume impassibile o su strade trafficate in un momento in cui un'altra località potrebbe essere più comoda. Questo è importante quando più sedi si trovano a pochi chilometri di distanza l'una dall'altra.
Il servizio Distance Matrix Service prende un elenco delle località di origine e di destinazione e restituisce non solo la distanza da percorrere, ma anche il tempo trascorso tra loro. Nel caso di un utente, l'origine è il punto in cui si trova attualmente, o il punto di partenza desiderato, e le destinazioni sono quelle delle località. Le origini e le destinazioni possono essere specificate come coppie di coordinate o come indirizzi; questi ultimi verranno abbinati quando viene chiamato il servizio. Puoi utilizzare la matrice delle distanze con una serie di parametri aggiuntivi per mostrare i risultati in base ai tempi di guida attuali o futuri.
L'esempio seguente chiama il servizio Distance Matrix, specificando l'origine e le località dell'utente. Questo esempio mostra la distanza dal centro della mappa a tre uffici Google a Londra.
Riferimento rapido per la codifica degli URL: %2C
= , (virgola), %3A
= : (due punti)
e %7C
= | (barra verticale).
https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
&units=metric
&mode=driving
&key=YOUR_API_KEY
&solution_channel=GMP_guides_locatorplus_v2_a
Ecco una versione che puoi copiare ed eseguire:
https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a
La risposta effettiva dal servizio sarà un elenco di indirizzi corrispondenti, distanze e durate, simile a quello mostrato nell'esempio seguente:
Espandi per visualizzare la risposta di esempio:
{ "destination_addresses": [ "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK", "1-13 St Giles High St, West End, London WC2H 8AG, UK", "6 Pancras Square, Kings Cross, London N1C 4AG, UK" ], "origin_addresses": [ "Unnamed Road, London, UK" ], "rows": [ { "elements": [ { "distance": { "text": "4.5 km", "value": 4540 }, "duration": { "text": "15 mins", "value": 924 }, "status": "OK" }, { "distance": { "text": "5.0 km", "value": 5043 }, "duration": { "text": "17 mins", "value": 1044 }, "status": "OK" }, { "distance": { "text": "6.9 km", "value": 6919 }, "duration": { "text": "23 mins", "value": 1357 }, "status": "OK" } ] } ], "status": "OK" }
La seguente immagine mostra l'origine (indicatore rosso C) e le destinazioni su una mappa:
![L'immagine mostra una mappa della città con la posizione dell'utente come indicatore rosso e le località circostanti come indicatori verdi.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/distance_matrix.png?authuser=5&hl=it)
La distanza in linea retta e quella del percorso spesso differiscono, come illustrato nella tabella seguente.
Località | Distanza retta | Strada nel traffico / tempo |
---|---|---|
Località A | 3,32 km | 4,5 km / 15 minuti |
Località B | 3,20 km | 5,0 km / 17 minuti |
Località C | 4,84 km | 6,9 km / 23 minuti |
Anche se la località B è la più vicina per distanza, il percorso e i tempi per raggiungerla sono più lunghi, poiché la località A è accessibile tramite autostrada.
Una volta inviata questa richiesta, puoi elaborare la corrispondenza per ordinare le risposte in base alla durata del tempo di guida. Puoi trovare esempi di questa funzione nei codelab del locator.
Fornire indicazioni stradali
In questo esempio viene utilizzato: Servizio indicazioni stradali dell'API Maps JavaScript | Disponibile anche: servizio web dell'API Directions per l'utilizzo su Android e iOS, direttamente dall'applicazione o in remoto tramite un proxy del server |
Mostrare agli utenti le indicazioni stradali all'interno del tuo sito o delle tue applicazioni significa che non dovranno uscire dal tuo sito, il che significa che gli utenti non saranno distratti da altre pagine e non vedranno la concorrenza sulla mappa. Puoi anche mostrare le emissioni di anidride carbonica della modalità di viaggio specifica e mostrare l'impatto di un determinato viaggio.
Il servizio Directions offre inoltre funzioni che ti consentono di elaborare i risultati e visualizzarli facilmente su una mappa.
Di seguito è riportato un esempio di visualizzazione del riquadro delle indicazioni stradali. Per maggiori informazioni sull'esempio, consulta la pagina sulla visualizzazione delle indicazioni stradali.
Per scoprire di più su queste funzionalità di Maps, leggi la documentazione dell'API Maps JavaScript o dai un'occhiata ai codelab passo passo per creare un localizzatore.
Aiutare gli utenti a prenotare appuntamenti
Quando gli utenti visualizzano Place Details della sede in un riquadro laterale, puoi offrire la comodità di prenotare un appuntamento con un clic sul pulsante, come illustrato nella figura che segue.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/store-locator-appointments.png?authuser=5&hl=it)
Esistono diversi modi per attivare questa funzionalità: (1) utilizzando la soluzione Locator Plus di Builder rapido per fornire questa funzionalità pronta all'uso e (2) utilizzando il profilo dell'attività. In questa sezione vengono descritte in dettaglio queste opzioni.
Utilizzo di Builder rapido Locator Plus
Puoi utilizzare la soluzione Locator Plus di Builder rapido per importare facilmente i dettagli dell'attività dal tuo profilo dell'attività. Una volta importati nello strumento Builder rapido, puoi attivare i link di prenotazione degli appuntamenti incorporati, ove disponibili, per le sedi della tua attività tramite Prenota con Google. Anche se non hai un profilo dell'attività associato a un Account Google, puoi comunque utilizzare Builder rapido per incorporare i link di prenotazione delle attività per cui hai già attivato i fornitori di prenotazioni di terze parti tramite Prenota con Google.*
![Prenota con Google](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_reserve_with_google.gif?authuser=5&hl=it)
*Prenota con Google è disponibile solo in alcuni paesi/regioni in cui le attività collaborano con un fornitore di servizi di prenotazione supportato. Se ti interessa Prenota con Google, ma al momento non collabori con un partner di Prenota con Google, chiedi al tuo fornitore di inviare il suo interesse compilando questo modulo e consulta la nostra documentazione per scoprire come iniziare. Se non collabori già con un fornitore di servizi di prenotazione, puoi visualizzare i fornitori idonei nella sezione Prenotazioni di Gestione dei profili delle attività.
Utilizzare Profilo dell'attività per attivare la prenotazione degli appuntamenti
Quando gestisci la tua presenza online con Profilo dell'attività, le sedi dell'attività che crei vengono associate agli ID luogo di Google Maps Platform per attivare la funzionalità di mappatura integrata con i dati aziendali.
Le API Profilo dell'attività ti consentono di creare azioni, come la prenotazione degli appuntamenti, che puoi recuperare e visualizzare nelle tue app, ma l'attivazione richiede alcuni passaggi manuali, come descritto di seguito.
Quando gli utenti visualizzano Place Details per una delle tue sedi in un riquadro laterale, puoi fornire un link per fissare un appuntamento. In questa sezione viene descritto come fare.
-
Crea un'API
placeActionLink
del profilo dell'attività per la località di tipoAPPOINTMENT
,ONLINE_APPOINTMENT
oDINING_RESERVATION
.placeActionLink
sarà l'oggetto che utilizzi per il link dell'appuntamento nel riquadro laterale. Se hai già creato il link che ti interessa, vai al passaggio successivo. Ecco un esempio di risposta da un'operazione POSTplaceActionLinks.create
riuscita:{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" }
-
Trova la sede del profilo dell'attività associata all'ID luogo di Google Maps Platform.
Quando gli utenti visualizzano Place Details, vedono i dettagli di un ID luogo di Google Maps Platform. L'ID luogo è associato a un ID sede del profilo dell'attività, perciò per recuperare e visualizzare il link per la prenotazione di appuntamenti che hai creato, devi trovare l'ID località in base all'ID luogo sulla mappa. Effettua le seguenti chiamate alle API del profilo dell'attività:
- Elenca gli account del progetto.
- Elenca tutte le sedi all'interno di un account.
- Nelle posizioni dell'account,
LocationKey
contiene l'ID luogo di Google Maps Platform, che puoi confrontare con l'ID luogo della località visualizzata.
-
Con l'ID località, puoi ottenere il link all'azione che vuoi. Per recuperare un appuntamento
placeActionLink
esistente, elencaplaceActionLinks
esistente per la sede e filtra perplaceActionType
per trovare il link per appuntamenti che vuoi utilizzare (APPOINTMENT
,ONLINE_APPOINTMENT
oDINING_RESERVATION
).L'esempio seguente mostra un APPOINTMENT
placeActionLink
nella risposta della chiamata LIST.{ "placeActionLinks": [ { "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/", "placeActionType": "APPOINTMENT", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } ] }
- Crea e compila un
<div>
nel riquadro laterale con i dati pertinenti dell'oggettoplaceActionLink
, in particolare l'URI del link di prenotazione dell'appuntamento.
Altre alternative per aggiungere i link agli appuntamenti
Se non gestisci un profilo dell'attività o non vuoi utilizzare la soluzione Quick Builder Locator Plus, controlla la tua piattaforma di prenotazione degli appuntamenti per trovare la documentazione su come incorporare un widget di prenotazione in un sito web o in un'app. Un'altra opzione è utilizzare Google Cloud, ad esempio Cloud Spanner per la gestione dell'inventario (video).
Visualizzazione delle offerte locali
Nel riquadro laterale Place Details di una sede, puoi mostrare offerte locali a cui gli utenti possono fare clic. L'API Google My Business ti consente di creare e recuperare "post" (ad esempio offerte locali) associati alle tue sedi. La figura seguente mostra un esempio di offerta locale in un riquadro laterale Dettagli luogo.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/store-locator-offers.png?authuser=5&hl=it)
Il diagramma dell'architettura nella sezione precedente mostra le tecnologie disponibili per aggiungere offerte al localizzatore.
Poiché le offerte locali sono associate alle sedi, devi trovare l'ID località del profilo dell'attività associato all'ID luogo di Google Maps Platform della sede che gli utenti stanno visualizzando.
Se disponi dell'ID sede del profilo dell'attività, puoi recuperare l'offerta pertinente come
localPost
da visualizzare nel riquadro laterale dei dettagli del luogo. Procedi nel seguente modo:
- Con l'API Google My Business, crea i post sulle offerte che vuoi mostrare, di tipo
OFFER
. -
Trova l'ID della località o della sede del profilo dell'attività associato all'ID luogo sulla mappa.
Quando gli utenti visualizzano Place Details, vedono i dettagli di un ID luogo di Google Maps Platform. L'ID luogo è associato a un ID località del profilo dell'attività, perciò devi trovare l'ID località in base all'ID luogo sulla mappa per recuperare e visualizzare il link dell'offerta locale per la tua sede. Effettua le seguenti chiamate alle API del profilo dell'attività:
- Elenca gli account del progetto.
- Elenca tutte le sedi all'interno di un account.
- Nelle località dell'account,
LocationKey
contiene l'ID luogo sulla mappa, che puoi confrontare con l'ID luogo della località visualizzata.
Di seguito è riportato un esempio di richiesta dei dettagli di una sede nelle API Profilo dell'attività:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
La risposta contiene un campo
locationKey
che è l'ID luogo che puoi utilizzare con le richieste di Google Maps Platform.Espandi per visualizzare la risposta di esempio.
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } }
-
Ora che disponi dell'ID località, puoi usufruire dell'offerta che ti interessa. Per recuperare un post di un'offerta esistente, elenca gli elementi
localPosts
esistenti per la località e filtra pertopicType
diOFFER
per trovare i contenuti dell'offerta che vuoi utilizzare.Ecco un esempio di richiesta per elencare i post locali attivi per una sede:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
L'esempio seguente mostra un
localPost
OFFER
nella risposta.Espandi per visualizzare la risposta di esempio.
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], }
- Crea e compila un campo
<div>
nel riquadro laterale con i dati pertinenti dell'oggettolocalPost
.
Personalizzazione della mappa
Puoi modificare l'aspetto e i dettagli della tua mappa in diversi modi. Ad esempio, puoi:
- Crea i tuoi indicatori personalizzati per sostituire i segnaposto predefiniti sulla mappa.
- Modifica i colori degli elementi della mappa per rispecchiare il tuo brand.
- Controlla quali punti d'interesse visualizzare (attrazioni, cibo, alloggi e così via) e la relativa densità, in modo da concentrare l'attenzione degli utenti sulle tue località, evidenziando al contempo i punti di riferimento che aiutano gli utenti a raggiungere la località più vicina.
Creazione di indicatori personalizzati
Puoi personalizzare gli indicatori modificando il colore predefinito (ad esempio mostrando se una sede è attualmente aperta) o sostituendo l'indicatore con un'immagine personalizzata, ad esempio il logo del tuo brand. Le finestre informative o popup possono fornire ulteriori informazioni agli utenti, ad esempio orario di apertura, numero di telefono o persino foto. Puoi anche creare indicatori personalizzati che siano raster, vettoriali, trascinabili e persino animati.
Di seguito è riportata una mappa di esempio in cui vengono utilizzati indicatori personalizzati. Consulta il codice sorgente nell' argomento sugli indicatori personalizzati dell'API Maps JavaScript.
Per informazioni dettagliate, consulta la documentazione sugli indicatori per JavaScript (web), Android e iOS.
Definizione dello stile della mappa
Google Maps Platform ti consente di definire lo stile della mappa in modo da aiutare gli utenti a trovare la sede più vicina, a raggiungerla il più rapidamente possibile e a rafforzare il tuo brand. Ad esempio, puoi modificare i colori della mappa in base al tuo branding e ridurre le distrazioni sulla mappa controllando i punti d'interesse visibili agli utenti. Google Maps Platform fornisce anche una serie di modelli di partenza delle mappe, alcuni dei quali sono ottimizzati per diversi settori, come viaggi, logistica, settore immobiliare e vendita al dettaglio.
Puoi creare o modificare gli stili di mappa nella pagina Stili di mappa della console Google Cloud nel progetto.
Espandi per visualizzare le animazioni della creazione e degli stili di mappa nella console Cloud:
Stili di mappa del settore
Questa animazione mostra gli stili di mappa predefiniti del settore che puoi utilizzare. Questi stili forniscono un punto di partenza ottimale per ogni tipo di settore. Ad esempio, lo stile di mappa per la vendita al dettaglio riduce i punti d'interesse sulla mappa, consentendo agli utenti di concentrarsi sulle tue località, nonché sui punti di riferimento, per raggiungere la località più vicina nel modo più rapido e sicuro possibile.
![Nella pagina Stile di mappa, il mouse fa clic su Crea nuovo stile di mappa. Nella pagina Nuovo stile di mappa, il mouse fa clic sul pulsante di opzione accanto a ciascuno dei seguenti stili ottimizzati per il settore: Viaggi, Logistica, Settore immobiliare e Retail. Ogni volta che fai clic su ciascun pulsante, la descrizione dello stile della mappa e l'anteprima grafica cambiano.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/ioms_animation.gif?authuser=5&hl=it)
Controllo dei punti di interesse
Questa animazione imposta il colore degli indicatori per i punti d'interesse e aumenta la densità dei PDI nello stile della mappa. Più elevata è la densità, maggiore è il numero di indicatori dei PDI visualizzati sulla mappa.
![Nella pagina Stile di mappa, il mouse fa clic su Crea nuovo stile di mappa. Nella pagina Nuovo stile di mappa, in Crea il tuo stile, è selezionato il pulsante di opzione Google Maps. Il mouse fa clic sul pulsante di opzione Versa 3 per lo stile Atlas, quindi fai clic su Apri nell'editor degli stili. Nell'editor degli stili, il mouse fa clic sulla funzionalità Punti d'interesse, quindi sull'elemento Icona, impostando il colore rosso. Il mouse seleziona quindi la casella di controllo Densità PDI e fa scorrere
il controllo della densità verso destra per ottenere la densità massima. Nell'anteprima della mappa vengono visualizzati sempre più indicatori rossi
man mano che la densità aumenta. Il mouse si sposta quindi sul pulsante Salva.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/poi_animation.gif?authuser=5&hl=it)
Ogni stile di mappa ha il proprio ID. Dopo aver pubblicato uno stile nella console Cloud, fai riferimento all'ID mappa nel codice, il che significa che puoi aggiornare uno stile di mappa in tempo reale senza dover ricorrere al refactoring della tua app. Il nuovo look verrà visualizzato automaticamente nell'applicazione esistente e verrà utilizzato su più 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 questi stili disponibili per un rendering più rapido della mappa
quando li chiami 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_locatorplus_v2_a">
</script>
Il seguente codice mostra una mappa con stili nella pagina web. (Non viene mostrato un elemento HTML <div id="map"></div>
in cui la mappa verrà visualizzata sulla 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.
Ottenere insight sull'utilizzo con l'analisi
Con l'analisi dei dati, puoi ottenere informazioni preziose su come gli utenti interagiscono con il tuo localizzatore. Questa sezione fornisce indicazioni su come configurare e monitorare Google Analytics e l'analisi di Profilo dell'attività per monitorare i dati che ti interessano di più. Per gli utenti di Builder rapido Locator Plus, una dashboard di analisi ti aiuta ad analizzare e generare approfondimenti, fornendo un quadro dell'efficacia con cui i visitatori del tuo sito interagiscono con lo Store locator, in base a dati anonimizzati.
![Analisi Locator Plus](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_analytics.png?authuser=5&hl=it)
Per accedere a questo report, vai alla sezione dei report sul coinvolgimento della console Cloud. Per saperne di più su questo report, consulta i report sul coinvolgimento.
Data la potenza e la flessibilità di Google Analytics, non proveremo a fornire informazioni esaustive su configurazione e utilizzo. Ti indirizzeremo invece alla documentazione chiave per ulteriori letture e istruzioni, evidenziando al contempo le principali considerazioni analitiche per la tua app localizzatore.
Impostazione di Google Analytics
Se già utilizzi Google Analytics con la tua app, puoi saltare questa sezione.
Di seguito è riportato un esempio di "tag globale" da incollare sul sito per attivare Google Analytics.
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/ gtag/js?id=G-XR5B5D4NW0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XR5B5D4NW0'); </script>
Che tu stia utilizzando Google Tag Manager o aggiungendo Google Analytics direttamente al tuo sito, è fondamentale capire come utilizzare l'implementazione di Google Analytics per:
- Attivare le interazioni degli utenti, ad esempio i clic, che possono essere misurate indipendentemente dalle visualizzazioni di pagina del sito web (eventi).
- Visualizzare dati non elaborati (metrics) in raggruppamenti significativi (dimensioni o dimensioni personalizzate).
Utilizzo di eventi personalizzati
Di seguito è riportato un esempio di definizione di un evento personalizzato nel tuo locator:
gtag('event', 'location', { 'method': 'address' });
È importante assegnare ai event
e ai method
nomi abbastanza chiari
da poter comprendere gli eventi nei report. Attivale per le interazioni specifiche da misurare, ad esempio quando un utente seleziona un indirizzo dall'elenco a discesa Completamento automatico, mostrato nella figura che segue.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_autocomplete_select.png?authuser=5&hl=it)
Puoi inviare la seguente chiamata di monitoraggio a Google Analytics che utilizza l'evento e il metodo che hai definito. Per facilitare la lettura, mostreremo ogni parametro di query su una riga separata.
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
La figura seguente mostra come questa chiamata a Google Analytics compare nella visualizzazione Ispeziona del browser, nella scheda Rete. (Fai clic per ingrandire).
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_inspect.png?authuser=5&hl=it)
Per verificare che i tag evento personalizzati vengano acquisiti correttamente, visualizza la vista "In tempo reale" in Google Analytics. Ad esempio, l'evento "posizione" configurato in precedenza per Place Autocomplete viene visualizzato in Google Analytics come mostrato nelle figure che seguono.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_realtime.png?authuser=5&hl=it)
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_realtime2.png?authuser=5&hl=it)
In alternativa, puoi monitorare gli eventi in tempo reale utilizzando DebugView, come mostrato nella figura seguente. Tieni presente che devi attendere 24 ore prima di accedere a un report Eventi completo nella sezione Coinvolgimento > Eventi di Google Analytics.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_debug.png?authuser=5&hl=it)
Puoi anche sviluppare e misurare strategie per aumentare le visite nei tuoi punti vendita fisici dall'app di localizzazione. Ad esempio, Google Analytics offre un'offerta Visite in negozio in Analytics che collega le analisi delle visite in negozio fisiche (misurate da Google Ads) ai dati del tuo localizzatore. Puoi anche sviluppare strategie di app-to-location personalizzate, ad esempio offerte online utilizzabili nelle tue sedi fisiche.
Metriche del profilo dell'attività
Oltre a monitorare gli eventi, le metriche e le dimensioni che ti interessano con Google Analytics, Profilo dell'attività dispone anche di metrics proprie. Ad esempio, se aggiungi al tuo locator i link per la prenotazione di appuntamenti e le offerte locali, puoi ottenere le metriche su questi clic e visualizzazioni.
La seguente richiesta di esempio alle API Profilo dell'attività richiede più tipi di metriche. Per monitorare i clic sulle offerte, le metriche LOCAL_POST_VIEWS_SEARCH
e
LOCAL_POST_ACTIONS_CALL_TO_ACTION
sono le più pertinenti.
Espandi per visualizzare la richiesta di esempio.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights Body: { "locationNames": [ "accounts/111098884960528804666/locations/15899957830169237700" ], "basicRequest": { "metricRequests": [ { "metric": "QUERIES_DIRECT" }, { "metric": "QUERIES_INDIRECT" }, { "metric": "VIEWS_MAPS" }, { "metric": "VIEWS_SEARCH" }, { "metric": "ACTIONS_DRIVING_DIRECTIONS" }, { "metric": "LOCAL_POST_VIEWS_SEARCH" }, { "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION" } ], "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } } }
Espandi per visualizzare la risposta di esempio.
{ "locationMetrics": [ { "locationName": "accounts/111098884960528804666/locations/15899957830169237700", "timeZone": "Asia/Singapore", "metricValues": [ { "metric": "QUERIES_DIRECT", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "82" } }, { "metric": "QUERIES_INDIRECT", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "1493" } }, { "metric": "VIEWS_MAPS", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "1571" } }, { "metric": "VIEWS_SEARCH", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "631" } }, { "metric": "ACTIONS_DRIVING_DIRECTIONS", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "3" } }, { "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "42" } }, { "metric": "LOCAL_POST_VIEWS_SEARCH", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "11" } } ] } ] }
La risposta contiene le metriche, in particolare:
- 1571 visualizzazioni del luogo su Google Maps
- 631 visualizzazioni di località su Ricerca Google.
- 3 richieste di indicazioni stradali per raggiungere la località.
- 42 clic sull'offerta di
LOCAL_POST_ACTIONS_CALL_TO_ACTION
. - 11 visualizzazioni di post locali nella Ricerca Google.
Un'altra opzione per le metriche prevede l'utilizzo di Prenota con Google per creare link delle azioni. Quando gli utenti fanno clic sui link delle azioni creati in Prenota con Google, puoi registrare queste azioni in Google Analytics, in modo da monitorare le conversioni in Google Analytics. Per ulteriori informazioni, consulta la documentazione sul monitoraggio delle conversioni.
Indipendentemente dalla strategia per le metriche che utilizzi, la misurazione è molto più che verificare l'andamento delle tue prestazioni rispetto ai KPI. Le cifre ti aiutano anche a capire l'impatto dei miglioramenti del locator sulla tua attività. Inoltre, puoi confrontare le metriche di Google Analytics sul tuo locator con le metriche del profilo dell'attività. Ad esempio, confrontando queste metriche, puoi vedere quanti clienti ricevono indicazioni stradali dal tuo locator e da Google Maps per poi visitare le tue sedi fisiche.
Miglioramento di Locator Plus in corso...
A seconda delle esigenze della tua attività o degli utenti, puoi migliorare ulteriormente l'esperienza degli utenti.
Invio di indicazioni stradali al dispositivo mobile
Per consentire agli utenti di raggiungere una località più facilmente, puoi inviare loro un link alle indicazioni stradali tramite SMS o email. Quando fanno clic sull'app, l'app Google Maps viene avviata sul loro telefono se è installata oppure il sito maps.google.com viene caricato 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 delle indicazioni stradali come il seguente, con il nome del luogo codificato nell'URL come parametro destination
e l'ID luogo come parametro destination_place_id
. Non è previsto alcun costo per scrivere o utilizzare gli URL di Maps, quindi non è necessario includere una chiave API nell'URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Facoltativamente, puoi fornire un parametro di query origin
utilizzando lo stesso formato di indirizzo della destinazione. Se invece la ometti, le indicazioni stradali partono dalla posizione attuale dell'utente, che potrebbe essere diversa da quella in cui l'utente stava utilizzando l'app Locator Plus. Gli URL di Maps forniscono ulteriori opzioni per i parametri di query, come travelmode
e dir_action=navigate
, per avviare le indicazioni stradali con la navigazione attivata.
Questo link cliccabile, che estende l'URL di esempio riportato sopra, imposta origin
come stadio di calcio di Londra e utilizza travelmode=transit
per fornire
indicazioni per il trasporto pubblico verso la destinazione.
Per inviare un SMS o un'email contenente questo URL, ti consigliamo attualmente di utilizzare un'applicazione di terze parti come twilio. Se utilizzi App Engine, puoi rivolgerti ad aziende di terze parti per inviare SMS o email. Per maggiori informazioni, consulta la sezione Invio di messaggi con servizi di terze parti.
Visualizzazione di Street View per aiutare gli utenti a visualizzare la località
Per molte località del mondo, Street View può essere utilizzato per mostrare l'esterno di un luogo, offrendo agli utenti una visuale del luogo prima del loro arrivo. Puoi fornire Street View in formato interattivo (web) o statico (API), a seconda che tu voglia che gli utenti "guardano" intorno all'area a 360 gradi. Street View è disponibile anche per Android e iOS.
Determinazione della posizione dell'utente con la geolocalizzazione
Nella maggior parte dei casi, puoi individuare la posizione dell'utente utilizzando i servizi di geolocalizzazione integrati nei suoi dispositivi o browser. Forniamo un esempio di utilizzo della funzionalità di geolocalizzazione HTML5 di un browser per visualizzare la posizione geografica di un utente o di un dispositivo su una mappa Google. È disponibile la documentazione relativa alla richiesta di autorizzazioni e al recupero della posizione in Android e iOS. Tuttavia, in alcune situazioni potresti voler usare una funzionalità di ricerca della posizione alternativa, ad esempio se i servizi di geolocalizzazione del dispositivo sono disattivati o hai dubbi in merito alla spoofing della posizione del dispositivo.
L' API Geolocation è un'API lato server che restituisce un raggio di posizione e di precisione in base alle informazioni su torri cellulari e nodi Wi-Fi che il client è in grado di rilevare. Puoi utilizzare la geolocalizzazione come meccanismo di backup per determinare la posizione dell'utente o per eseguire un controllo incrociato della posizione segnalata dal dispositivo.
Combinazione dei dati sulla posizione personalizzati con Place Details
Nella precedente sezione Fornire i dettagli sui luoghi abbiamo parlato dell'utilizzo di Place Details per offrire agli utenti un ricco livello di informazioni sulle tue sedi, ad esempio orari di apertura, foto e recensioni.
È utile comprendere il costo dei diversi campi di dati in Place Details, classificati come dati di base, contatto e ambiente. Per gestire i costi, una strategia consiste nel combinare le informazioni già in tuo possesso sulle tue sedi con quelle aggiornate (di solito i dati di base e di contatto) di Google Maps, come chiusura temporanea, orario festivo, valutazioni degli utenti, foto e recensioni. Se disponi già dei dati di contatto per le tue sedi, non dovrai richiedere questi campi da Place Details e potresti limitare la tua richiesta al recupero solo dei campi Basic o Atmosphere Data a seconda di ciò che vuoi visualizzare.
Puoi avere i tuoi dati dei 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.