Google Maps Platform consente ai clienti di sviluppare esperienze uniche personalizzando il design visivo degli indicatori di mappa con gli indicatori avanzati. In questo documento vedremo in che modo i clienti possono fare un passo in più e creare indicatori che cambiano dinamicamente in base ai dati in tempo reale.
Gli indicatori della mappa sono uno strumento utile per offrire agli utenti esperienze di mappatura dettagliate. Gli attributi degli indicatori, come dimensioni, colore e forma, possono indicare 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 aggiornamento per l'utente.
In questo articolo utilizziamo un esempio a scopo illustrativo: una catena di vendita al dettaglio vuole utilizzare una mappa per mostrare agli utenti i tempi di attesa dei negozi. Tuttavia, questa stessa architettura potrebbe essere utilizzata per molti altri casi d'uso. Ecco alcune idee aggiuntive:
- Disponibilità di camere d'hotel: 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 quando l'inventario diminuisce.
- Disponibilità di posti di parcheggio: su una mappa dei parcheggi, chiedi agli utenti di selezionare con sicurezza una destinazione che avrà uno spazio per loro al loro arrivo.
- Ristoranti aperti, chiusi a breve e chiusi: su una mappa che mostra i risultati di ricerca dei ristoranti, è importante che gli utenti siano a conoscenza dell'eventuale chiusura di un ristorante al loro arrivo.
La soluzione per gli indicatori dinamici avanzati
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 sfrutta il proprio sistema di gestione delle code di 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à di località da mostrare agli utenti. In questo caso, stiamo cercando di 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 degli indicatori corrispondenti per annotare visivamente il tempo di attesa sull'indicatore. L'elenco degli attributi degli indicatori è disponibile subito nella specifica di PinElement. Puoi anche utilizzare codice 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 indicatore: blu per un tempo di attesa inferiore a 5 minuti, giallo per più di 5 minuti
- Contenuti dell'indicatore (richiede indicatori HTML personalizzati): includeremo il tempo di attesa attuale in minuti nell'indicatore stesso
Passaggio 2 - Configura la connessione a 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 di cui si dispone. In questo esempio usiamo un approccio pull, in cui richiediamo regolarmente i dati aggiornati sui tempi di attesa tramite richieste HTTP (REST). Nelle sezioni seguenti scoprirai architetture alternative che sfruttano gli approcci push.
Per consentire all'applicazione di accedere ai dati sui tempi di attesa dal nostro server, l'architettura sfrutta Cloud Functions for Firebase. Cloud Functions ci consente di definire una funzione di backend per accedere a questi dati e elaborarli. Includiamo anche la libreria Firebase nella nostra applicazione web, il che ci permette di accedere alla nostra funzione Cloud Functions tramite una richiesta HTTP.
Il passaggio successivo consiste nell'assicurarsi di mantenere i dati aggiornati per l'utente. A questo scopo, impostiamo un timer con un timeout di 30 secondi utilizzando la funzione JavaScript setInterval. 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 sulla mappa. Nel passaggio successivo viene illustrato come apportare queste modifiche.
Passaggio 3 - Esegui il rendering degli indicatori di mappa
Ora possiamo utilizzare gli indicatori avanzati per eseguire il rendering degli indicatori stilizzati sulla mappa. Gli indicatori avanzati possono essere visualizzati sulle mappe create con l'API Maps JavaScript di Google Maps Platform. Quando utilizzi 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 definiamo i contenuti dell'indicatore 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 di ogni negozio. Il codice seguente legge i dati aggiornati sui tempi di attesa e assegna lo stile a ciascun 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 dei tempi di attesa per visualizzare i tempi di attesa aggiornati per gli utenti:
Metodi alternativi per connettersi a origini dati in tempo reale
Esistono vari modi per connettersi alle origini dati in tempo reale. Di seguito, esaminiamo due opzioni alternative: Firebase Cloud Messaging e WebSocket. Qualunque sia l'approccio che scegli, assicurati di prendere in considerazione i fattori riportati di seguito per garantire un rendimento costante dello strumento mappa:
- Frequenza degli aggiornamenti
- Volume dei 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 del tempo di attesa vengono aggiornati nel backend. I messaggi di aggiornamento attivano una funzione di callback il cui scopo è aggiornare l'aspetto e i contenuti degli indicatori.
Una cosa da considerare prima di scegliere questa architettura è che richiede una connessione al server permanente per ogni browser che esegue l'applicazione della mappa. Per questo motivo, l'esecuzione potrebbe essere più costosa e potrebbe essere meno efficace nel contesto dei problemi di connettività.
WebSockets
I WebSockets sono un altro approccio basato su push per mantenere aggiornati i dati. Analogamente allo scenario precedente, puoi utilizzare WebSocket per stabilire una connessione permanente tra il tuo backend e l'applicazione della mappa. I vantaggi funzionali di questo approccio sono simili per natura a Firebase Cloud Messaging, ma potrebbe essere necessario lavoro aggiuntivo per configurare l'infrastruttura necessaria.
Conclusione
Gli sviluppatori possono combinare origini dati in tempo reale con indicatori avanzati per creare visualizzazioni intuitive su Google Maps. Esistono diversi modi per connettere queste origini dati a seconda dei requisiti delle mappe, dell'hardware e del browser dell'utente e del volume di dati. I dati integrati possono quindi essere utilizzati per controllare l'aspetto degli indicatori avanzati in tempo reale, creando un'esperienza dinamica per gli utenti.
Azioni successive
Per approfondire:
- 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 | Sr. Customer Engineer della piattaforma Google Cloud
Steve Barrett | Solutions Engineer di Google Maps Platform