Product Locator - guida all'implementazione

Panoramica

web iOS API

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 singola piattaforma, ma i link alla documentazione sono forniti per l'implementazione su altre piattaforme.

Quando i tuoi 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 per la personalizzazione che forniamo in questo argomento sono quelli che consigliamo come combinazione ottimale delle API di Google Maps Platform per creare esperienze utente di localizzazione dei prodotti di alta qualità.

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 in cui si trovano i loro articoli, ad esempio in auto, in bicicletta, a piedi o con il trasporto pubblico.

Diagramma dell'architettura
Diagramma architettonico (fai clic per ingrandire)

Abilitazione delle API in corso…

Per implementare Product Locator, devi abilitare le API seguenti nella console Google Cloud. I seguenti link ipertestuali ti indirizzano a Google Cloud Console per abilitare ogni 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 fondamentale dell'implementazione.
  • L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata, per migliorare la soluzione.
Associazione delle sedi dei negozi ai luoghi di Google Maps Platform Abbina la sede di un negozio a un luogo in Google Maps Platform.
Identificazione della località dell'utente Aggiungi la funzionalità di tipo durante la digitazione per migliorare l'esperienza utente su tutte le piattaforme e la precisione degli indirizzi con pressioni minime dei tasti.
Identificazione dei negozi più vicini Calcola la distanza da percorrere e il tempo di percorrenza per più origini e destinazioni, specificando facoltativamente varie forme di trasporto, come a piedi, in auto, con i mezzi pubblici 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 per la navigazione Ottieni dati sulle indicazioni stradali dall'origine alla destinazione utilizzando varie forme di trasporto, ad esempio a piedi, in auto, in bicicletta e con il trasporto pubblico.
Invio delle indicazioni stradali al dispositivo mobile Oltre a mostrare le indicazioni stradali sulla tua pagina web, puoi anche inviare le indicazioni stradali al telefono di un utente per consentire la navigazione su Google Maps ovunque si trovino.
Mostrare le 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. Mostra (o nascondi) punti d'interesse (PDI) specifici sulla mappa per aiutare gli utenti a orientarsi meglio e controllare la densità dei PDI per evitare disordine sulla mappa.
Combinare i dati sulla posizione personalizzati con i Dettagli luogo Combina i dettagli personalizzati sulla località con Dettagli luogo per fornire agli utenti un set completo di dati utili per prendere decisioni.

Associazione delle sedi dei negozi ai luoghi di Google Maps Platform

Recupero degli ID luogo in corso...

In questo esempio vengono utilizzati: l'API Places Disponibile anche: JavaScript

Potresti avere un database dei tuoi negozi con informazioni di base come il nome del luogo, l'indirizzo e il numero di telefono e vuoi associarlo a un luogo in Google Maps Platform come insieme di destinazioni finali in cui gli utenti possono ritirare i prodotti. Per recuperare le informazioni in possesso di Google Maps Platform 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 Find Place nella ricerca Place 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 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 geocodificare, recuperare i dettagli del luogo e richiedere indicazioni stradali per raggiungerlo.

Geocodifica delle tue località

In questo esempio vengono utilizzati: l'API Geocoding Disponibile anche: JavaScript

Se il tuo database di negozi contiene indirizzi, ma non coordinate geografiche, utilizza l'API Geocoding per ottenere la latitudine e la longitudine dell'indirizzo in modo da calcolare quali negozi sono più vicini al cliente. Puoi geocodificare il negozio sul lato server, memorizzare latitudini e longitudini nel database e aggiornarlo 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 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 posizione dell'utente

In questo esempio vengono utilizzati: Libreria Places Autocomplete nell'API Maps JavaScript Disponibile anche: Android | iOS

Un componente chiave di Product Locator è l'identificazione della località di partenza dell'utente. Puoi offrire all'utente due opzioni per specificare la posizione iniziale: digitare l'origine della ricerca o concedere autorizzazioni alla geolocalizzazione nel browser web o ai servizi di geolocalizzazione per dispositivi mobili.

Gestione delle voci digitate utilizzando il completamento automatico

Gli utenti di oggi sono abituati alla funzionalità di completamento automatico con completamento automatico nella versione per consumatori 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 riempie il resto tramite 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
Funzionalità di completamento automatico degli indirizzi (fai clic per ingrandire)

Nell'esempio seguente, aggiungi la libreria Place Autocomplete al tuo sito aggiungendo il parametro libraries=places all'URL dello script dell'API JavaScript di Maps.

<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 alla pagina una casella di testo per l'input dell'utente:

<input id="autocomplete" placeholder="Enter
  starting address, city, or zip code" type="text"></input>

Infine, devi inizializzare il servizio Autocomplete e collegarlo alla casella di testo denominata. L'applicazione di un vincolo per le previsioni di Completamento automatico di un luogo alla geocodifica dei tipi consente di configurare il campo di immissione in modo che accetti vie, quartieri, città e codici postali, in modo che gli utenti possano inserire qualsiasi livello di specificità per descrivere la propria 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 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", searchFromOrigin);
}

In questo esempio, dopo che l'utente seleziona l'indirizzo, viene avviata la funzione searchFromOrigin(). Questo prende la geometria del risultato corrispondente, ovvero la località dell'utente, e cerca le sedi più vicine in base a queste coordinate come l'origine, descritta nella sezione Identificazione dei negozi più vicini.

Visualizzazione delle opzioni per la località
Visualizzazione delle opzioni relative alla località (fai clic per ingrandire)

Espandi questo pulsante per vedere le procedure dettagliate video per l'aggiunta del completamento automatico dei luoghi alla tua app:

Sito web

App Android

App per iOS

Utilizzo della geolocalizzazione del browser

Per richiedere e gestire la geolocalizzazione nel browser HTML5, scopri come attivare una finestra Usa La mia posizione:

Autorizzazione del browser per la posizione dell&#39;utente
Richiesta di autorizzazione per il browser web (fai clic per ingrandire)

Identificazione dei negozi più vicini

In questo esempio vengono utilizzati: Servizio Distance Matrix, API Maps JavaScript Disponibile anche: API Distanza Matrix

Una volta individuata la località dell'utente, puoi confrontarla con quella dei tuoi negozi. Grazie al servizio Matrice distanza, l'API Maps JavaScript aiuta gli utenti a selezionare la posizione più comoda per loro in base al tempo di guida o alla distanza stradale.

Il modo standard per organizzare un elenco di località è ordinarle per distanza. Spesso questa distanza viene calcolata semplicemente utilizzando la linea retta da un utente alla località, ma questo può essere fuorviante. La linea retta potrebbe trovarsi sopra un fiume invadente o attraversare strade trafficate in un momento in cui un'altra posizione potrebbe essere più comoda. Questa operazione è importante quando ci sono più sedi a pochi chilometri di distanza l'una dall'altra.

Il servizio Distanza Matrix, l'API Maps JavaScript funziona prendendo un elenco delle località di partenza e di destinazione e restituendo non solo la distanza da percorrere, ma anche il tempo che intercorre tra loro. Nel caso di un utente, l'origine è quella in cui si trova attualmente o il punto di partenza desiderato, mentre le destinazioni sono quelle delle località. Le origini e le destinazioni possono essere specificate come coppie di coordinate o indirizzi; quando chiami il servizio, il servizio corrisponde agli indirizzi. Puoi utilizzare il servizio Matrice distanze, 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 Matrice distanze, l'API Maps JavaScript, specificando l'origine dell'utente e 25 sedi dei 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 sul negozio

In questo esempio vengono utilizzati: libreria Places, API Maps JavaScript Disponibile anche: SDK Places per Android | SDK Places per iOS | API Places

Puoi condividere dettagli dettagliati del 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 completare l'ordine.

Dopo aver effettuato una chiamata all'API Maps JavaScript per ottenere Place Details, puoi filtrare la risposta ed eseguirne il rendering.

Sono visualizzate le opzioni del negozio
Visualizzazione delle opzioni del negozio (fai clic per ingrandire)

Per richiedere i Dettagli luogo, hai bisogno dell'ID di ciascuna delle tue sedi. Consulta la sezione Recupero degli ID luogo per recuperare l'ID luogo della tua località.

La seguente richiesta Place Details restituisce l'indirizzo, le coordinate, il sito web, il numero di telefono, la valutazione e gli orari per l'ID luogo Google London:

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 del localizzatore di prodotti

A seconda delle esigenze della tua attività o degli utenti, puoi migliorare ulteriormente la loro esperienza.

Fornire indicazioni stradali di navigazione

In questo esempio vengono utilizzati: 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 server

Quando mostri agli utenti indicazioni stradali dal tuo sito o dalle tue applicazioni, gli utenti non devono abbandonare il sito e distrarsi dalle altre pagine o vedere i concorrenti sulla mappa. Potresti anche mostrare le emissioni di anidride carbonica della modalità di viaggio specifica e l'impatto di un determinato viaggio utilizzando un tuo set di dati sulle emissioni di anidride carbonica.

Il servizio Directions Service 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 ulteriori informazioni sull'esempio, consulta la sezione Visualizzare le indicazioni stradali per il testo.

Invio delle indicazioni stradali al dispositivo mobile

Per consentire agli utenti di raggiungere ancora più facilmente una località, puoi inviare loro un SMS o un'email con un link alle indicazioni stradali. Quando fanno clic su questa voce, l'app Google Maps si avvia 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 sono previsti costi per comporre 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 la ometti, le indicazioni stradali partono dalla posizione attuale dell'utente, che potrebbe essere diversa da quella in cui si trovava utilizzando l'app Product Locator. Gli URL di Maps forniscono opzioni aggiuntive per i parametri di ricerca, 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 uno stadio di calcio di Londra e utilizza travelmode=transit per fornire indicazioni stradali con il trasporto pubblico verso la destinazione.

Per inviare un SMS o un'email contenente questo URL, consigliamo attualmente di utilizzare un'applicazione di terze parti come twilio. Se utilizzi App Engine, puoi avvalerti di società di terze parti per l'invio di messaggi SMS o email. Per ulteriori informazioni, consulta la sezione Invio di messaggi con servizi di terze parti.

Visualizzazione delle sedi su una mappa interattiva

Utilizzo di Dynamic Maps

In questo esempio vengono utilizzati: l'API Maps JavaScript Disponibile anche: Android | iOS

Un locator è una parte importante dell'esperienza utente. Alcuni siti, tuttavia, potrebbero mancare anche di una semplice mappa, che richiede agli utenti di uscire dal sito o dall'app per trovare una posizione nelle vicinanze. Ciò significa un'esperienza non ottimale per gli utenti che devono passare da una pagina all'altra per ottenere le informazioni di cui hanno bisogno. In alternativa, puoi migliorare questa esperienza incorporando e personalizzando le mappe nelle tue applicazioni.

Con poche righe di codice, puoi aggiungere una mappa dinamica alla tua pagina, ovvero una mappa che gli utenti possono spostare, aumentare e diminuire lo zoom e ottenere dettagli su diversi luoghi e punti di interesse.

Innanzitutto, devi includere l'API Maps JavaScript nella pagina. A questo scopo, devi collegare il seguente script alla 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 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 di destinazione. L'impostazione di un'area geografica garantisce inoltre che il comportamento delle app utilizzate al di fuori degli Stati Uniti sia polarizzato in base all'area geografica impostata. Visualizza i dettagli della copertura di Google Maps Platform per un elenco completo delle lingue e delle regioni supportate e per scoprire di più sull'utilizzo dei parametri region.

Successivamente, è necessario 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 quali controlli saranno disponibili sulla mappa per i tuoi utenti. Tieni presente che getElementById() fa riferimento all'ID div "mappa" riportato sopra.

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 sei interessato a impostare la posizione iniziale, il punto o i limiti centrali e il livello di zoom (quanto lo zoom della mappa viene aumentato 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 mappa in diversi modi. Ad esempio, puoi:

  • Crea indicatori personalizzati per sostituire i segnaposto predefiniti della mappa.
  • Modifica i colori degli elementi della mappa per adattarli al tuo brand.
  • Controlla quali punti d'interesse mostrare (attrazioni, cibo, alloggio e così via) e con quale densità, in modo da concentrare l'attenzione degli utenti sulle tue sedi 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 cambiando il colore predefinito (che potrebbe indicare 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, come orario di apertura, numero di telefono o persino foto. Puoi anche creare indicatori personalizzati raster, vettoriali, trascinabili e persino animati.

Di seguito è riportata una mappa di esempio che utilizza indicatori personalizzati. Consulta il codice sorgente nell' argomento Indicatori personalizzati dell'API JavaScript di Google Maps.

Per informazioni dettagliate, consulta la documentazione relativa agli indicatori per JavaScript (web), Android e iOS.

Applicare uno stile alla mappa

Google Maps Platform ti permette di definire lo stile della mappa in modo che aiuti gli utenti a trovare la sede più vicina, arrivarci il più rapidamente possibile e contribuisci a rafforzare il tuo brand. Ad esempio, puoi cambiare i colori della mappa per adattarli al tuo branding e ridurre le distrazioni sulla mappa controllando i punti di interesse visibili agli utenti. Google Maps Platform fornisce anche una serie di modelli di partenza della mappa, 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 tuo progetto.

Espandi per visualizzare le animazioni della creazione e dello stile delle mappe nella console Cloud:

Stili di mappa del settore

Questa animazione mostra gli stili di mappa predefiniti di settore che puoi utilizzare. Questi stili rappresentano 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 ad arrivare alla sede più vicina il più rapidamente e con sicurezza.

Nella pagina Stile mappa, il mouse fa clic su Crea nuovo stile mappa. Nella pagina Nuovo stile mappa, il mouse fa clic sul pulsante di opzione accanto a ciascuno dei seguenti stili ottimizzati per settore: Viaggi, Logistica, Settore immobiliare e Vendita al dettaglio. Quando fai clic su ciascun pulsante, la descrizione dello stile della mappa e l&#39;anteprima grafica cambiano.

Controllo dei punti di interesse

Questa animazione imposta il colore dell'indicatore per i punti d'interesse e aumenta la densità dei PDI nello stile della mappa. Maggiore è la densità, maggiore è il numero di indicatori di PDI visualizzati sulla mappa.

Nella pagina Stile mappa, il mouse fa clic su Crea nuovo stile mappa. Nella pagina Nuovo stile mappa, in Crea il tuo stile, è selezionato il pulsante di opzione Google Map. Il mouse fa clic sul pulsante di opzione Atlas per lo stile Atlas, quindi su Apri nell&#39;editor di stili. Nell&#39;editor degli stili, il mouse fa clic sulla funzionalità Punti di interesse, poi sull&#39;elemento Icona per impostare il colore su rosso. Il mouse seleziona la casella di controllo Densità PDI e fa scorrere il controllo della densità verso destra per ottenere la massima densità. Nell&#39;anteprima della mappa vengono visualizzati sempre più indicatori rossi con l&#39;aumento della densità. Il mouse si sposta quindi sul pulsante Salva.

Ogni stile di mappa ha un proprio ID. Dopo aver pubblicato uno stile in Cloud Console, puoi fare riferimento all'ID mappa nel tuo codice, il che significa che puoi aggiornare uno stile di mappa in tempo reale senza dover eseguire il refactoring dell'app. Il nuovo look verrà visualizzato automaticamente nell'applicazione esistente e sarà utilizzato su tutte le piattaforme. I seguenti esempi mostrano come aggiungere un ID mappa a una pagina web utilizzando l'API Maps JavaScript.

Includendo uno o più map_ids nell'URL dello script, l'API Maps JavaScript rende automaticamente disponibili questi stili per un rendering della mappa più rapido quando chiami questi stili 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 visualizza una mappa con stili nella pagina web. (Non 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ù su come incorporare la personalizzazione delle mappe basata su cloud in JavaScript (Web), Android e iOS.

Combinazione di dati sulla posizione personalizzati con Dettagli luogo

Nella sezione Mostrare le sedi su una mappa interattiva, abbiamo parlato dell'utilizzo di Dettagli luogo per offrire agli utenti un livello dettagliato di informazioni sulle sedi, ad esempio orari di apertura, foto e recensioni.

È utile comprendere il costo dei diversi campi di dati in Dettagli luogo, categorizzati come Dati di base, di contatto e sull'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, orari di apertura delle festività e valutazioni, foto e recensioni degli utenti. Se disponi già dei dati di contatto dei tuoi negozi, non dovrai richiedere questi campi a Dettagli luogo e potrai limitare la richiesta al recupero dei soli campi di dati di base o sull'atmosfera, a seconda di ciò che vuoi visualizzare.

Puoi avere dati sui luoghi da integrare o utilizzare al posto di Dettagli luogo. Il codelab per il localizzatore full stack fornisce un esempio dell'utilizzo di GeoJSON con un database per archiviare e recuperare i dettagli sulla tua posizione.