Google Maps Platform consente ai clienti di sviluppare esperienze uniche personalizzando il design visivo dei loro indicatori di mappa utilizzando gli indicatori avanzati. In questo documento esploreremo come i clienti possono fare un ulteriore passo avanti e creare indicatori che cambiano dinamicamente in base ai dati in tempo reale.
Gli indicatori di mappa sono uno strumento utile per offrire agli utenti esperienze di mappatura complete. Gli attributi degli indicatori, come dimensioni, colore e forma, possono fornire ulteriori informazioni su ogni località contrassegnata. In alcuni casi, queste informazioni aggiuntive possono cambiare in modo dinamico e lo sviluppatore potrebbe voler aggiornare la visualizzazione della mappa, mantenendo un senso di freschezza per l'utente.
In questo documento utilizziamo un esempio a scopo illustrativo: una catena di vendita al dettaglio vuole utilizzare una mappa per mostrare agli utenti i tempi di attesa nei negozi. Tuttavia, questa stessa architettura potrebbe essere utilizzata per molti altri casi d'uso. Ecco alcune idee aggiuntive:
- Disponibilità delle camere di hotel: su una mappa che mostra i risultati di ricerca degli hotel, la freschezza della disponibilità delle camere è un indicatore importante che può incoraggiare gli utenti a prenotare un hotel man mano che l'inventario diminuisce.
- Disponibilità di parcheggi: su una mappa dei parcheggi, offri agli utenti la certezza di selezionare una destinazione che avrà un posto per loro quando arrivano.
- 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 per gli indicatori avanzati dinamici
Puoi creare una mappa utilizzando gli indicatori avanzati per visualizzare i dati dinamici. Come accennato in precedenza, il caso d'uso è una catena di negozi di vendita al dettaglio che sfrutta il proprio sistema di gestione delle code alla cassa 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à della località da mostrare agli utenti. In questo caso, vogliamo mostrare una sola proprietà: il tempo di attesa attuale in ogni sede del negozio, misurato in minuti.
Il passaggio successivo consiste nel selezionare uno o più attributi dell'indicatore 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 l'HTML personalizzato per opzioni di personalizzazione più avanzate.
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 utilizzando richieste HTTP (REST). Nelle sezioni seguenti, vedrai 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 for Firebase. Cloud Functions ci consente di definire una funzione di backend per accedere a questi dati ed elaborarli. Includiamo anche la libreria Firebase nella nostra applicazione web, consentendoci di accedere alla nostra funzione Cloud Functions utilizzando una richiesta HTTP.
Il passaggio successivo consiste nel garantire che i dati vengano mantenuti aggiornati per l'utente. Per farlo, impostiamo un timer utilizzando la funzione JavaScript setInterval con un timeout di 30 secondi. Ogni volta che il timer viene attivato, richiediamo i dati aggiornati sui tempi di attesa come descritto sopra. Una volta ricevuti i nuovi dati, dobbiamo aggiornare l'aspetto degli indicatori sulla mappa. Il passaggio successivo descrive in dettaglio come apportare queste modifiche.
Passaggio 3: esegui il rendering degli indicatori sulla mappa
Ora possiamo utilizzare gli indicatori avanzati per visualizzare gli indicatori stilizzati sulla mappa. I segnaposto avanzati possono essere visualizzati sulle mappe create dall'API Maps JavaScript di Google Maps Platform. Quando utilizzi gli indicatori avanzati, assicurati di includere il parametro ID mappa nella richiesta della 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 lo stile CSS per ogni negozio. Il codice seguente legge i dati aggiornati sui tempi di attesa e assegna uno 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";
La mappa ora utilizza la nostra API esistente per i tempi di attesa per visualizzare i tempi di attesa aggiornati per gli utenti:
Modi alternativi per connettersi a origini dati in tempo reale
Esistono vari modi per connettersi a origini dati in tempo reale. Di seguito esaminiamo due opzioni alternative: Firebase Cloud Messaging e Websocket. Indipendentemente dall'approccio scelto, assicurati di considerare i seguenti fattori per mantenere le prestazioni dello strumento mappa:
- 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 del segnaposto.
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, l'esecuzione potrebbe essere più costosa e meno affidabile in caso di problemi di connettività.
WebSockets
I WebSockets sono un altro approccio basato su push per mantenere aggiornati i dati. Come nello scenario precedente, puoi utilizzare i WebSocket per stabilire una connessione permanente tra il backend e l'applicazione della mappa. I vantaggi funzionali di questo approccio sono di natura simile a Firebase Cloud Messaging, tuttavia potrebbe essere necessario un lavoro aggiuntivo 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 connettere 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 quindi essere utilizzati per controllare l'aspetto dei marker avanzati in tempo reale, consentendo un'esperienza dinamica per gli utenti.
Azioni successive
Per approfondire:
- Indicatori avanzati - Google Developer Center
- Crea indicatori con HTML personalizzato
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Collaboratori
Autori principali:
Jim Leflar | Google Maps Platform Solutions Engineer
John Branigan | Google Cloud Platform Sr. Customer Engineer
Steve Barrett | Google Maps Platform Solutions Engineer