Google Maps Platform consente ai clienti di sviluppare esperienze uniche personalizzando il design visivo degli indicatori della mappa utilizzando gli indicatori avanzati. In questo documento illustreremo come i clienti possono fare un passo avanti e creare indicatori che cambiano dinamicamente in base ai dati in tempo reale.
Gli indicatori sulla mappa sono uno strumento utile per offrire agli utenti esperienze di mappatura complete. Gli attributi degli indicatori, come dimensioni, colori e forma, possono trasmettere informazioni aggiuntive su ogni posizione contrassegnata. In alcuni casi, queste informazioni aggiuntive possono cambiare dinamicamente e lo sviluppatore potrebbe voler aggiornare la visualizzazione della mappa, mantenendo un senso di novità per l'utente.
In questo articolo utilizziamo un esempio a scopo illustrativo: una catena di negozi vuole utilizzare una mappa per mostrare agli utenti i tempi di attesa in negozio. Tuttavia, questa stessa architettura potrebbe essere utilizzata per molti altri casi d'uso. Ecco alcune idee aggiuntive:
- Disponibilità delle camere d'albergo: su una mappa che mostra i risultati di ricerca degli hotel, l'aggiornamento della disponibilità delle camere è un segnale importante che può incoraggiare gli utenti a prenotare un hotel man mano che l'inventario diminuisce.
- Disponibilità di posti auto: su una mappa dei parcheggi, consenti agli utenti di selezionare una destinazione in cui troveranno un posto auto al loro arrivo.
- Ristoranti aperti, in chiusura e chiusi: su una mappa che mostra i risultati di ricerca dei ristoranti, è importante che gli utenti sappiano se un ristorante potrebbe essere chiuso al loro arrivo.
La soluzione di indicatori avanzati dinamici
Ora vediamo come creare una mappa utilizzando indicatori avanzati per visualizzare i dati dinamici. Come accennato in precedenza, il caso d'uso è una catena di negozi di vendita al dettaglio che utilizza il proprio sistema di gestione delle code al pagamento per stimare e visualizzare i tempi di attesa per gli utenti. Questa è l'architettura dell'applicazione:
Passaggio 1: determina gli attributi per definire l'esperienza visiva
Il primo passaggio consiste nel determinare una o più proprietà posizione da mostrare agli utenti. In questo caso, vogliamo mostrare una sola proprietà: il tempo di attesa corrente in ogni negozio, misurato in minuti.
Il passaggio successivo consiste nel selezionare uno o più attributi degli indicatori corrispondenti per annotare visivamente il tempo di attesa sull'indicatore della mappa. L'elenco degli attributi degli indicatori è disponibile immediatamente nella specifica PinElement. Puoi anche utilizzare HTML personalizzato per opzioni di personalizzazione più complete.
Per questo esempio, utilizzeremo due attributi degli indicatori per visualizzare i dati sui tempi di attesa:
- Colore dell'indicatore: blu per un tempo di attesa inferiore a 5 minuti, giallo per un tempo di attesa superiore a 5 minuti
- Contenuti degli indicatori (richiede indicatori HTML personalizzati): includeremo il tempo di attesa corrente in minuti nell'indicatore stesso
Passaggio 2 - Configura la connessione alle origini dati in tempo reale
Esistono diversi modi per connettersi alle origini dati e la soluzione giusta dipende dal caso d'uso e dall'infrastruttura tecnica. In questo esempio utilizziamo un approccio pull, in cui richiediamo regolarmente i dati aggiornati sui tempi di attesa tramite richieste HTTP (REST). Nelle sezioni seguenti vengono descritte architetture alternative che sfruttano gli approcci push.
Per consentire alla nostra applicazione di accedere ai dati sui tempi di attesa dal nostro server, la nostra architettura sfrutta Cloud Functions per Firebase. Cloud Functions ci consente di definire una funzione di backend per accedere a questi dati e calcolarli. Includi anche la libreria Firebase nella tua applicazione web, in modo da poter accedere alla tua funzione Cloud tramite una richiesta HTTP.
Il passaggio successivo consiste nel garantire che i dati rimangano aggiornati per l'utente. Per farlo, abbiamo configurato un timer utilizzando la funzione setInterval di JavaScript con un timeout di 30 secondi. Ogni volta che il timer viene attivato, richiediamo dati aggiornati sul tempo di attesa come descritto sopra. Una volta ricevuti i nuovi dati, dobbiamo aggiornare l'aspetto degli indicatori della mappa. Il passaggio successivo illustra in dettaglio come apportare queste modifiche.
Passaggio 3: esegui il rendering degli indicatori della mappa
Ora possiamo utilizzare gli indicatori avanzati per visualizzare gli indicatori stilizzati sulla mappa. Gli indicatori avanzati possono essere visualizzati sulle mappe create con l'API JavaScript di Maps di Google Maps Platform. Quando utilizzi gli indicatori avanzati, assicurati di includere il parametro ID mappa nella richiesta di mappa JS.
Nello snippet di codice riportato di seguito, creiamo gli indicatori e ne definiamo i contenuti creando un elemento div HTML:
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
Il passaggio finale consiste nell'aggiornare il testo dell'indicatore e gli stili CSS per ogni negozio. Il codice riportato di seguito legge i dati aggiornati sui tempi di attesa e assegna lo stile a ogni segnaposto del negozio in base al tempo di attesa:
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
Ora la mappa utilizza la nostra API di tempi di attesa esistente per visualizzare i tempi di attesa aggiornati per gli utenti:
Metodi alternativi per connettersi a origini dati in tempo reale
Esistono diversi modi per connettersi alle origini dati in tempo reale. Di seguito esaminiamo due opzioni alternative, Firebase Cloud Messaging e Websockets. Qualunque approccio tu scelga, assicurati di prendere in considerazione i seguenti fattori per mantenere alto il rendimento dello strumento di mappatura:
- Frequenza degli aggiornamenti
- Volume di dati
- Numero di indicatori nella visualizzazione mappa
- Funzionalità hardware e del browser
Firebase Cloud Messaging
Firebase Cloud Messaging è un approccio push. Con questo approccio, invierai aggiornamenti all'applicazione della mappa ogni volta che i dati sui tempi di attesa vengono aggiornati nel backend. I messaggi di aggiornamento attiveranno una funzione di callback il cui scopo è aggiornare l'aspetto e i contenuti dell'indicatore.
Un aspetto da considerare prima di selezionare questa architettura è che richiede il mantenimento di una connessione al server persistente per ogni browser che esegue l'applicazione della mappa. Per questo motivo, potrebbe essere più costoso da gestire e meno affidabile in caso di problemi di connettività.
WebSockets
I WebSockets sono un altro approccio push per mantenere aggiornati i dati. Come nello scenario precedente, puoi utilizzare WebSocket per stabilire una connessione persistente tra il tuo backend e la tua applicazione di mappe. I vantaggi funzionali di questo approccio sono simili in natura a quelli di Firebase Cloud Messaging, ma potrebbero essere necessari ulteriori interventi per configurare l'infrastruttura necessaria.
Conclusione
Gli sviluppatori possono combinare origini dati in tempo reale con gli indicatori avanzati per creare visualizzazioni intuitive su Google Maps. Esistono diversi modi per collegare queste origini dati, a seconda dei requisiti della mappa, dell'hardware e del browser dell'utente e del volume di dati. I dati integrati possono essere utilizzati per controllare l'aspetto degli indicatori avanzati in tempo reale, offrendo un'esperienza dinamica agli utenti.
Azioni successive
Letture aggiuntive:
- Indicatori avanzati - Google Developer Center
- Creare indicatori con HTML personalizzato
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Collaboratori
Autori principali:
Jim Leflar | Solutions Engineer di Google Maps Platform
John Branigan | Customer Engineer Senior della piattaforma Google Cloud
Steve Barrett | Solutions Engineer di Google Maps Platform