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.
Quando gli utenti vedono i tuoi prodotti online, vogliono trovare il modo migliore e più comodo per ricevere l'ordine. La guida all'implementazione di Product Locator e i suggerimenti sulla personalizzazione forniti in questo argomento costituiscono la combinazione ottimale delle API di Google Maps Platform per creare ottime esperienze utente per il Product Locator.
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 le indicazioni stradali per raggiungere il negozio che ha il loro articolo quando si trovano in auto, in bicicletta, a piedi o con i mezzi pubblici.
Abilitazione delle API in corso…
Per implementare Product Locator, devi abilitare le API seguenti nella console Google Cloud. I seguenti link ipertestuali ti indirizzano alla console Google Cloud per abilitare ciascuna API per il progetto selezionato:
Per ulteriori informazioni sulla configurazione, consulta la guida introduttiva a Google Maps Platform.
Sezioni della guida all'implementazione
Di seguito sono riportate le implementazioni e le personalizzazioni che tratteremo in questo argomento.
- L'icona del segno di spunta è un passaggio di implementazione principale.
- 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 | Associa la sede di un negozio a un luogo in Google Maps Platform. | |
Identificare la località dell'utente | Aggiungi la funzionalità di digitazione a consumo per migliorare l'esperienza utente su tutte le piattaforme e migliorare la precisione degli indirizzi con una sequenza minima di tasti. | |
Identificare i negozi più vicini | Calcola la distanza da percorrere e il tempo di percorrenza per più luoghi di partenza e destinazioni, specificando facoltativamente diverse forme di trasporto, come a piedi, in auto, con il trasporto pubblico o in bicicletta. | |
Visualizzazione delle informazioni sul negozio | Mostra informazioni ricche di dati sui tuoi negozi, in modo che gli utenti possano raggiungerli più facilmente. | |
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. | |
Invio di indicazioni stradali al dispositivo mobile | Oltre a mostrare le indicazioni stradali sulla tua pagina web, puoi anche inviare indicazioni stradali al telefono di un utente per navigare utilizzando Google Maps ovunque ti trovi. | |
Visualizzazione delle sedi su una mappa interattiva | 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 di interesse (PDI) sulla mappa per aiutare gli utenti a orientarsi meglio e controlla la densità dei PDI per creare disordine sulla mappa. | |
Combinare i dati sulla posizione personalizzati con Place Details | Combina i dettagli personalizzati della tua località con Place Details per offrire agli utenti un set di dati completo per prendere decisioni. |
Associare le sedi dei negozi alle località di Google Maps Platform
Recupero degli ID dei luoghi in corso...
In questo esempio viene utilizzata: API Places | 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
che i tuoi utenti possono ritirare i prodotti. Per recuperare le informazioni
in possesso di Google Maps Platform sul luogo, incluse le coordinate
geografiche e le informazioni fornite dagli utenti, trova l'ID luogo corrispondente a ciascuno dei negozi nel tuo database.
Puoi effettuare una chiamata all'
endpoint Find Place in Place Search dell'API Places e
richiedere solo il campo place_id
.
Di seguito è riportato 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_productlocator_v1_a
Puoi archiviare questo ID luogo nel database insieme agli altri dati del negozio e utilizzarlo in modo efficiente per richiedere informazioni sul negozio. Di seguito sono riportate le istruzioni per utilizzare l'ID luogo per geocodificare, recuperare i dettagli del luogo e richiedere indicazioni stradali per raggiungerlo.
Geocodifica delle tue sedi
In questo esempio viene utilizzata: API Geocoding | Disponibile anche: JavaScript |
Se il database dei tuoi negozi contiene le vie ma non le coordinate geografiche, utilizza l'API Geocoding per ottenere la latitudine e la longitudine dell'indirizzo per calcolare i negozi più vicini al cliente. Puoi geocodificare il negozio 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 la latitudine e la 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_productlocator_v1_a
Identificazione della località dell'utente
In questo esempio viene utilizzato: Libreria di completamento automatico di Places nell'API Maps JavaScript | Disponibile anche: Android | iOS |
Un componente chiave in Product Locator è l'identificazione della posizione di partenza dell'utente. Puoi offrire all'utente due opzioni per specificare la propria località di partenza: digitare l'origine della ricerca o concedere autorizzazioni alla geolocalizzazione del browser web o ai servizi di geolocalizzazione mobile.
Gestione delle voci digitate utilizzando il completamento automatico
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 compila il resto mediante l'uso di widget. Puoi anche fornire la tua funzionalità di completamento automatico utilizzando direttamente le librerie di Places.
![Funzionalità di completamento automatico degli indirizzi](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/product-locator/images/address-entry-2.png?authuser=4&hl=it)
Nell'esempio seguente, aggiungi la libreria Place Autocomplete al tuo sito aggiungendo il parametro libraries=places
all'URL dello script dell'API Maps JavaScript.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>
Successivamente, aggiungi una casella di testo alla tua 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,
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 indicare la relazione delle tue località 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", searchFromOrigin); }
In questo esempio, dopo che l'utente seleziona l'indirizzo, viene avviata la funzione searchFromOrigin()
. Partendo dalla geometria del risultato corrispondente, ovvero la località dell'utente, viene effettuata una ricerca delle sedi più vicine in base a queste coordinate come origine, discusse nella sezione Identificazione dei negozi più vicini.
![Visualizzazione delle opzioni di località](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/product-locator/images/view-inventory-location-granted.png?authuser=4&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
Utilizzo della geolocalizzazione del browser
Per richiedere e gestire la geolocalizzazione del browser HTML5, scopri come attivare una finestra Utilizza la mia posizione:
![Autorizzazione browser per la posizione dell'utente](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/product-locator/images/location-permission.png?authuser=4&hl=it)
Identificazione dei negozi più vicini
In questo esempio viene utilizzato: Distance Matrix Service, l'API Maps JavaScript | Disponibile anche: API Distance Matrix |
Una volta individuata la posizione dell'utente, puoi confrontarla con la località in cui si trovano i tuoi negozi. 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.
Il modo standard di organizzare un elenco di località è ordinarle per distanza. Spesso questa distanza viene calcolata utilizzando la semplice linea retta da un 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 se ci sono più sedi a pochi chilometri di distanza l'una dall'altra.
Il servizio Distance Matrix, l'API Maps JavaScript funziona prendendo un elenco di località di origine e di destinazione e restituendo non solo la distanza di viaggio, ma anche il tempo tra loro. Nel caso di un utente, l'origine è quella 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; quando chiami il servizio, il servizio corrisponde agli indirizzi. Puoi utilizzare il servizio Distance Matrix, l'API Maps JavaScript con parametri aggiuntivi, per mostrare i risultati in base ai tempi di guida attuali o futuri.
L'esempio seguente chiama il servizio Distance Matrix, l'API Maps JavaScript, specificando l'origine dell'utente e 25 sedi di negozi alla volta.
function getDistances(place) { let distanceMatrixService = new google.maps.DistanceMatrixService(); const origins = [place]; return new Promise((resolve, reject) => { const callback = (response, status) => { if (status === google.maps.DistanceMatrixStatus.OK && response) { resolve(response); } else { reject(status); } }; distanceMatrixService.getDistanceMatrix( { origins, destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.IMPERIAL, }, callback ); }); } 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((response) => { for (let i = 0; i < response.rows[0].elements.length; i++) { stores[i].address = response.destinationAddresses[i]; stores[i].travelDistance = response.rows[0].elements[i].distance.value; stores[i].travelDistanceText = response.rows[0].elements[i].distance.text; stores[i].travelDuration = response.rows[0].elements[i].duration.value; stores[i].travelDurationText = response.rows[0].elements[i].duration.text; } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
Per ogni sede nelle vicinanze puoi mostrare lo stato di disponibilità del prodotto in base al tuo database di inventario.
Visualizzazione delle informazioni sui negozi
In questo esempio vengono utilizzati: Libreria Places, API Maps JavaScript | Disponibile anche: SDK Places per Android | SDK Places per iOS | API Places |
Puoi condividere informazioni dettagliate sul luogo come i dati di contatto, gli orari di apertura e lo stato di apertura attuale per aiutare i clienti a scegliere la sede preferita o a finalizzare l'ordine.
Dopo aver effettuato una chiamata all'API Maps JavaScript per ottenere Place Details, puoi filtrare ed eseguire il rendering della risposta.
![Visualizzazione delle opzioni del negozio](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/product-locator/images/view-inventory-location-granted.png?authuser=4&hl=it)
Per richiedere i dettagli del luogo, devi disporre dell'ID luogo di ciascuna delle tue sedi. Consulta Recupero degli ID luogo per recuperare l'ID della località.
La seguente richiesta Place Details restituisce l'indirizzo, le coordinate, il sito web, il numero di telefono, la valutazione e gli orari relativi all'ID luogo Google Londra:
var request = { placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website'] };service = new google.maps.places.PlacesService(map); service.getDetails(request, callback);
function callback(place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarker(place); } }
Miglioramento dello strumento di localizzazione dei prodotti in corso...
A seconda delle esigenze della tua attività o degli utenti, puoi migliorare ulteriormente l'esperienza degli utenti.
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 |
Quando mostri indicazioni stradali agli utenti dal tuo sito o dalle tue applicazioni, questi ultimi non devono uscire dal sito e farsi distrarre con altre pagine o vedere la concorrenza sulla mappa. Potresti anche mostrare le emissioni di anidride carbonica della modalità di viaggio specifica e mostrare l'impatto di un determinato viaggio utilizzando un set di dati sul carbonio di tua proprietà.
Il servizio Directions offre anche 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 Visualizzazione di indicazioni stradali di testo.
Invio di indicazioni stradali al dispositivo mobile
Per consentire agli utenti di raggiungere una destinazione più facilmente, puoi inviare loro un link alle indicazioni stradali tramite SMS o email. Dopo avere fatto clic, l'app Google Maps verrà avviata sul loro telefono, se è installata, oppure maps.google.com verrà 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 del luogo come parametro destination_place_id
. Non sono previsti costi per la compilazione o l'utilizzo degli 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 corrente dell'utente, che potrebbe essere diversa da quella in cui l'utente stava utilizzando
la tua app Product Locator.
Gli URL di Maps
forniscono ulteriori opzioni di 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, al momento ti consigliamo di utilizzare un'applicazione di terze parti come twilio. Se utilizzi App Engine, puoi rivolgerti ad aziende di terze parti per inviare email o SMS. Per ulteriori informazioni, consulta Invio di messaggi con servizi di terze parti.
Visualizzazione delle sedi su una mappa interattiva
Utilizzo delle mappe dinamiche
In questo esempio vengono utilizzati: API Maps JavaScript | Disponibile anche: Android | iOS |
Il localizzatore è una parte importante dell'esperienza utente. Alcuni siti, tuttavia, potrebbero mancare anche di una mappa semplice, che obbliga gli utenti ad abbandonare il sito o l'app per trovare una località nelle vicinanze. Ciò significa che l'esperienza non è ottimale per gli utenti che devono passare 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.
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_productlocator_v1_a"></script>
L'URL fa riferimento alla funzione initMap
JavaScript 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 di copertura di Google Maps Platform
per un elenco completo delle lingue e delle regioni supportate e scopri di più
sull'utilizzo
dei parametri di 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 di 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 gli 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 posizione). La maggior parte degli altri elementi, come l'ottimizzazione dei controlli, sono facoltativi quando determini il livello di interazione con la mappa.
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 (che potrebbe mostrare 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 informazioni aggiuntive agli utenti, ad esempio orario di apertura, numero di telefono o persino foto. Puoi anche creare indicatori personalizzati di tipo raster, vettoriale, trascinabile e persino animato.
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 per adattarli 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 i viaggi, la logistica, il settore immobiliare e la vendita al dettaglio.
Puoi creare o modificare gli stili di mappa nella pagina Stili di mappa della console Google Cloud nel tuo 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=4&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ù alta è la densità, più numerosi sono gli 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=4&hl=it)
Ogni stile di mappa ha il proprio ID. Dopo aver pubblicato uno stile nella console Cloud, fai riferimento all'ID mappa nel tuo 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 tuo 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 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'integrazione della Personalizzazione delle mappe basata su cloud in JavaScript (web), Android e iOS.
Combinazione dei dati sulla posizione personalizzati con Place Details
Nella sezione precedente Visualizzare le sedi su una mappa interattiva abbiamo parlato dell'utilizzo di Place Details per offrire agli utenti un ricco livello di informazioni sulle tue sedi, ad esempio orario di apertura, foto e recensioni.
È utile comprendere il costo dei diversi campi di dati in Place Details, classificati come dati di base, di contatto e ambiente. Per gestire i costi, una strategia consiste nel combinare le informazioni già in tuo possesso sulle tue sedi con le informazioni aggiornate (di solito i dati di base e di contatto) di Google Maps, come chiusura temporanea, orario per le festività e valutazioni degli utenti, foto e recensioni. Se disponi già dei dati di contatto per i tuoi negozi, non dovrai richiedere questi campi da Place Details e puoi 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.