Product Locator - guida all'implementazione

Panoramica

Quando i tuoi utenti vedono i tuoi prodotti online, vogliono trovare i prodotti migliori e un modo conveniente per ricevere l'ordine. Guida all'implementazione di Product Locator e i suggerimenti di personalizzazione che forniamo in questo argomento sono quelli che consigliamo combinazione ottimale di API di Google Maps Platform per creare un prodotto eccellente esperienze utente con lo strumento di localizzazione.

Seguendo questa guida all'implementazione, puoi aiutare i clienti a visualizzare i dettagli le informazioni di cui hanno bisogno per trovare i tuoi prodotti e fornisci indicazioni stradali negozio che possiede un articolo, durante la guida, il ciclismo, a piedi o in bicicletta trasporto pubblico.

Abilitazione delle API in corso…

Per implementare Product Locator, devi abilitare le API seguenti nella nella console Google Cloud. I seguenti link ipertestuali ti indirizzano alla console Google Cloud per abilitare ciascuna API per il progetto selezionato:

• API Maps JavaScript
• API Places
• API Geocoding
• API Distance Matrix
• API Directions

Per ulteriori informazioni sulla configurazione, vedi Come ottenere hai iniziato a usare Google Maps Platform.

Sezioni della guida all'implementazione

Di seguito sono riportate le implementazioni e le personalizzazioni che tratteremo in questo argomento.

• check_circle_filled L'icona del segno di spunta è un passaggio di implementazione principale.
• stars L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata per migliorare la soluzione.

Recupero degli ID dei luoghi in corso...

Potresti avere un database dei tuoi negozi con informazioni di base come il nome della sede, il suo indirizzo e il suo numero di telefono e che vuoi associare con un luogo in Google Maps Platform come insieme di destinazioni finali gli utenti possono ritirare i prodotti. Recuperare le informazioni che Google Maps Platform ha su quel luogo, incluse le informazioni geografiche coordinate e informazioni fornite dagli utenti, individua l'ID luogo corrispondente a ciascuno dei negozi nel tuo database. Puoi chiamare il Trova l'endpoint di Place in Place Search dell'API Places e e richiedere solo il campo place_id.

Di seguito è riportato un esempio di richiesta dell'ID luogo per l'account Google Londra ufficio:

    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 memorizzare questo ID luogo nel tuo database con gli altri dati del negozio e usarli in modo efficiente per richiedere informazioni sul negozio. Di seguito sono riportate le istruzioni per l'utilizzo l'ID luogo per geocodificare, recuperare i dettagli del luogo e richiedere indicazioni stradali al posto.

Geocodifica delle tue sedi

Se il database dei tuoi negozi contiene le vie ma non le coordinate geografiche, utilizzare l'API Geocoding per ottenere latitudine e longitudine al fine di calcolare quali sono i negozi più vicini al tuo al cliente. Puoi geocodificare il negozio sul lato server, memorizzare le latitudini e longitudini nel database aggiorna almeno ogni 30 giorni.

Ecco un esempio di utilizzo dell'API Geocoding per ottenere latitudine e longitudine dell'ID luogo restituito per Google Londra ufficio:

    https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a

Un componente fondamentale in Product Locator è identificare il punto di partenza in ogni località. Puoi offrire all'utente due opzioni per specificare posizione: è possibile digitare l'origine della ricerca o concedere autorizzazioni al web geolocalizzazione del browser o 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 type-ahead nella la versione consumer di Google Maps. Questa funzionalità può essere integrata che utilizza 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 tramite l'uso dei widget. Puoi anche fornire il tuo completamento automatico usando direttamente le librerie di Places.

Nell'esempio seguente, aggiungi la libreria Place Autocomplete al tuo sito tramite aggiungendo il parametro libraries=places al 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 Autocomplete e collegarlo al casella di testo denominata. Vincolare le previsioni di Place Autocomplete per geocodificare i tipi configura il campo di immissione in modo da accettare indirizzi, quartieri, città e codici postali, in modo che gli utenti possano inserire qualsiasi livello di specificità per descrivere origine dati. Assicurati di richiedere il campo geometry in modo che la risposta contiene la latitudine e la longitudine del luogo di origine dell'utente. Utilizzerai queste mappe per indicare la relazione tra le località all'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, una volta che l'utente ha selezionato l'indirizzo, Viene avviata la funzione searchFromOrigin(). Questo prende la geometria il risultato corrispondente alla località dell'utente, quindi cerca il termine luoghi in base a quelle coordinate come punto di partenza, discusso nel Sezione Identificazione dei negozi più vicini.

Utilizzo della geolocalizzazione del browser

Per richiedere e gestire la geolocalizzazione del browser HTML5, scopri come attiva la finestra Usa La mia posizione:

Una volta individuata la posizione dell'utente, puoi confrontarla con la località in cui si trova il tuo negozio di questi luoghi. Per farlo, Distance Matrix Service, l'API Maps JavaScript aiuta gli utenti a selezionare la posizione più comoda per loro in base al tempo di guida o alla distanza dalla strada.

Il modo standard di organizzare un elenco di sedi è ordinarle per distanza percorsa. Spesso questa distanza viene calcolata utilizzando la linea retta ma ciò può essere fuorviante. La linea retta può essere su un fiume impassibile o attraverso strade trafficate in un momento in cui posizione potrebbe essere più comoda. Questo è importante quando si hanno a disposizione località a pochi chilometri di distanza l'una dall'altra.

Il servizio Distance Matrix, l'API Maps JavaScript, funziona prendendo una dell'elenco di località di partenza e di arrivo e di ritorno non solo il viaggio. la distanza ma anche il tempo che li separa. Nel caso di un utente, l'origine è dove si trovano attualmente, o il punto di partenza desiderato, e le destinazioni è quella delle posizioni. Le origini e le destinazioni possono essere specificate come coppie di coordinate o indirizzi; quando chiami il servizio, quest'ultimo corrisponde gli indirizzi. Puoi utilizzare lo Servizio Distance Matrix, API Maps JavaScript con per mostrare risultati basati sui tempi di guida attuali o futuri.

L'esempio seguente chiama Distance Matrix Service, API Maps JavaScript, che specifica e 25 punti vendita 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 a del tuo database di inventario.

Puoi condividere dettagli importanti del luogo, come dati di contatto, orari di apertura, e stato di apertura attuale per aiutare i clienti a scegliere la loro sede preferita finalizzare l'ordine.

Dopo aver chiamato il API Maps JavaScript per ottenere Place Details, puoi filtrare e visualizzare la risposta.

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 luogo del tuo in ogni località.

La seguente richiesta Place Details restituisce l'indirizzo, le coordinate, il sito web numero di telefono, valutazione e orari dell'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 dell'attività o le tue esigenze, puoi migliorare ulteriormente un'esperienza senza intervento manuale.

Quando mostri agli utenti indicazioni stradali dal tuo sito o dalle tue applicazioni, i tuoi utenti non hanno bisogno di allontanarsi dal sito per distrarsi pagine web o visualizzare i concorrenti sulla mappa. Potresti anche mostrare le emissioni di anidride carbonica la modalità di viaggio specifica e mostrare l'impatto di un determinato viaggio utilizzando un sul carbonio che potresti possedere.

Il servizio Directions offre anche funzioni che ti consentono di elaborare i risultati. mostrarle facilmente su una mappa.

Di seguito è riportato un esempio di visualizzazione del riquadro delle indicazioni stradali. Per ulteriori informazioni sull'esempio, consulta la sezione Visualizzazione delle indicazioni stradali di testo.

Per consentire agli utenti di raggiungere una località più facilmente, puoi inviare messaggi o email un link alle indicazioni stradali. Una volta selezionato l'utente, l'app Google Maps verrà avviata il sul loro telefono, se è installato, oppure map.google.com caricherà nel suo browser web. Entrambe queste esperienze offrono all'utente la possibilità di utilizzare navigazione passo passo, inclusa la guida vocale, per raggiungere la destinazione.

Utilizza 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 luogo ID come parametro destination_place_id. Non sono previsti costi scrivere o utilizzare 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 dell'indirizzo come destinazione. Se la ometti, le direzioni iniziano la posizione corrente dell'utente, che potrebbe essere diversa da quella in cui l'utente stava utilizzando dall'app Product Locator. URL di Maps forniscono opzioni aggiuntive per i parametri di query, come travelmode e dir_action=navigate per avviare le indicazioni stradali con la navigazione attivata attiva.

Questo link cliccabile, che estende l'URL di esempio riportato sopra, imposta la origin come stadio di calcio di Londra e usa travelmode=transit per fornire indicazioni di trasporto pubblico alla destinazione.

Per inviare un SMS o un'email contenente questo URL, attualmente ti consigliamo di utilizzare una un'applicazione di terze parti come twilio. Se utilizzi App Engine, puoi ricorrere a società di terze parti per inviare SMS messaggi o email. Per ulteriori informazioni, vedi Invio di messaggi con Servizi di terze parti.

Utilizzo delle mappe dinamiche

Il localizzatore è una parte importante dell'esperienza utente. Alcuni siti, tuttavia, potrebbero non dispone nemmeno di una mappa semplice, che obbliga gli utenti ad abbandonare il sito o l'app per trovare nelle vicinanze. Ciò si traduce in un'esperienza non ottimale per gli utenti che devono navigare tra le pagine per trovare le informazioni di cui hanno bisogno. Invece, puoi migliorare questa esperienza incorporando e personalizzando le mappe diverse applicazioni.

Aggiunta di una mappa dinamica alla pagina, ovvero una mappa che gli utenti possono spostare. intorno, aumentare e diminuire lo zoom e visualizzare dettagli su vari luoghi e punti d'interesse: bastano poche righe di codice.

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 JavaScript initMap che viene eseguita quando viene caricata la pagina. Nell'URL, puoi anche definire lingua o regione della mappa per assicurarti che sia formattata correttamente per il paese specifico scelto come target. L'impostazione di una regione garantisce inoltre il comportamento delle app utilizzate al di fuori degli Stati Uniti è 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ù su region: dell'uso dei parametri.

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. Questo avviene nel Funzione script initMap specificata nell'URL dello script. In questo script, mostrata nell'esempio seguente, puoi impostare la posizione iniziale, il tipo di mappa e quali controlli saranno disponibili sulla mappa per i tuoi utenti. Nota che getElementById() fa riferimento alla "mappa" ID div 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 locator, di solito ti interessa impostare la posizione iniziale, punto centrale o limiti e il livello di zoom (in che misura la mappa viene ingrandita posizione). La maggior parte degli altri elementi, come l'ottimizzazione dei controlli, sono facoltativi determinare il livello di interazione con la mappa.

Personalizzazione della mappa

Puoi modificare l'aspetto e i dettagli della tua mappa in diversi modi. Per 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 di interesse visualizzare (attrazioni, cibo, alloggi e così via) e a quale densità, così puoi 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 modificando il colore predefinito (che potrebbe mostrare se una sede è aperta al momento) o sostituendo l'indicatore con un indicatore personalizzato come il logo del tuo brand. Le finestre informative o popup possono fornire informazioni aggiuntive agli utenti, come orari di apertura, numero di telefono, o persino foto. Puoi anche creare indicatori personalizzati di tipo raster, vettoriale trascinabili e persino animate.

Di seguito è riportata una mappa di esempio in cui vengono utilizzati indicatori personalizzati. (vedi il codice sorgente nella argomento degli 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 tua mappa in modo che gli utenti possano trovare la posizione più vicina, raggiungerla il più velocemente possibile e aiutare a rafforzare il tuo brand. Ad esempio, puoi modificare i colori della mappa per adattarli al tuo branding e puoi ridurre le distrazioni sulla mappa controllando i punti di interesse visibili agli utenti. Google Maps Platform offre anche una serie di modelli di base delle mappe, alcuni dei quali ottimizzati per diversi settori, ad esempio viaggi, logistica, settore immobiliare e vendita al dettaglio.

Puoi creare o modificare gli stili di mappa nella console Google Cloud Stili mappa nel tuo progetto.

Espandi per visualizzare le animazioni della creazione di stili di mappa e gli stili nella console Cloud:

Stili di mappa del settore

Questa animazione mostra gli stili di mappa predefiniti per il settore che puoi utilizzare per gli utilizzi odierni. Questi stili forniscono un punto di partenza ottimale per ogni tipo di settore. Ad esempio, lo stile di mappa Vendita al dettaglio riduce i punti d'interesse sulla mappa, consentendo agli utenti di concentrarsi sulle tue località e punti di riferimento per aiutarli a raggiungere il punto più vicino nel più breve tempo possibile con sicurezza il più possibile.

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. Più alta è la densità, sulla mappa vengono visualizzati altri indicatori di PDI.

Ogni stile di mappa ha il proprio ID. Dopo aver pubblicato uno stile nel console Cloud, devi fare riferimento a quell'ID mappa nel tuo codice, puoi aggiornare uno stile di mappa in tempo reale senza dover ricorrere al refactoring dell'app. La il nuovo look apparirà 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, il valore L'API Maps JavaScript rende automaticamente disponibili questi stili per un rendering della mappa più veloce 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 mostra una mappa con stili nella pagina web. (Non mostrato è un codice HTML <div id="map"></div> elemento in cui verrà visualizzata la mappa 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.

Nella precedente sezione Mostrare la tua posizione su una mappa interattiva. abbiamo visto l'utilizzo di Place Details per offrire agli utenti un livello avanzato Informazioni sulle tue sedi, ad esempio orari di apertura, foto e recensioni.

È utile comprendere costo di campi di dati diversi in Place Details, classificati come Basic, Dati di contatto e ambiente. Per gestire i costi, una strategia è combinare Le informazioni già in tuo possesso sulle sedi con i dati aggiornati (di solito Dati di base e di contatto) da Google Maps come chiusura temporanea, orario festivo e valutazioni, foto e recensioni degli utenti. Se hai già dati di contatto per i tuoi negozi, non dovrai richiedere questi campi Place Details e può vincolare la richiesta al recupero solo di base o ambiente I campi dei dati dipendono da ciò che vuoi visualizzare.

Potresti avere i tuoi dati dei luoghi da integrare o utilizzare al posto di Place Details. La codelab per il localizzatore full stack offre un esempio di utilizzo di GeoJSON con un database per memorizzare e recuperare i dettagli della tua posizione.