Mit der Google Maps Platform können Kunden einzigartige Funktionen entwickeln, indem sie das visuelle Design ihrer Kartenmarkierungen mithilfe von erweiterten Markierungen anpassen. In diesem Dokument erfahren Sie, wie Kunden noch einen Schritt weiter gehen und Markierungen erstellen können, die sich basierend auf Echtzeitdaten dynamisch ändern.
Kartenmarkierungen sind ein nützliches Tool, um Nutzern umfassende Kartierungsfunktionen zur Verfügung zu stellen. Mithilfe von Markierungsattributen wie Größe, Farbe und Form können zusätzliche Informationen zu jedem markierten Ort bereitgestellt werden. In einigen Fällen ändern sich diese zusätzlichen Informationen möglicherweise dynamisch und der Entwickler möchte, dass die Kartenvisualisierung aktualisiert wird, damit der Nutzer ein Gefühl von Aktualität erhält.
In diesem Artikel wird ein Beispiel zur Veranschaulichung verwendet: Eine Einzelhandelskette möchte mithilfe einer Karte die Wartezeiten in ihren Geschäften für Nutzer sichtbar machen. Diese Architektur könnte jedoch auch für viele andere Anwendungsfälle verwendet werden. Hier einige weitere Ideen:
- Hotelzimmerverfügbarkeit: Auf einer Karte mit Hotelsuchergebnissen ist die Aktualität der Zimmerverfügbarkeit ein wichtiges Signal, das Nutzer dazu bewegen kann, eine Hotelreservierung vorzunehmen, wenn das Inventar abnimmt.
- Verfügbarkeit von Parkplätzen: Auf einer Karte mit Parkplätzen können Sie Nutzern die Gewissheit geben, dass sie bei der Ankunft einen Parkplatz für sie auswählen können.
- Restaurants öffnen, schließen bald und geschlossen: Auf einer Karte mit Restaurantsuchergebnissen ist es wichtig, dass Nutzer wissen, ob ein Restaurant bei ihrer Ankunft geschlossen sein könnte.
Die Lösung für dynamische erweiterte Markierungen
Gehen wir nun die Schritte zum Erstellen einer Karte mit erweiterten Markierungen zur Visualisierung dynamischer Daten durch. Wie bereits erwähnt, handelt es sich bei dem Anwendungsfall um eine Einzelhandelskette, die ihr System zur Warteschlangenverwaltung für den Bezahlvorgang nutzt, um die Wartezeiten für die Nutzenden zu schätzen und zu visualisieren. So sieht die Anwendungsarchitektur aus:
Schritt 1: Attribute festlegen, um die visuelle Erfahrung zu definieren
Zuerst legen Sie eine oder mehrere Standorteigenschaften fest, die Nutzern angezeigt werden sollen. In diesem Fall möchten wir nur eine Unterkunft anzeigen: die aktuelle Wartezeit an jedem Geschäftsstandort in Minuten.
Der nächste Schritt besteht darin, ein oder mehrere entsprechende Markierungsattribute auszuwählen, um die Wartezeit der Kartenmarkierung visuell anzugeben. Die Liste der Markierungsattribute ist in der PinElement-Spezifikation standardmäßig verfügbar. Sie können auch benutzerdefinierten HTML-Code verwenden, um umfassendere Anpassungsoptionen zu erhalten.
In diesem Beispiel verwenden wir zur Visualisierung der Wartezeitdaten zwei Markierungsattribute:
- Markierungsfarbe: Blau für Wartezeiten unter 5 Minuten, Gelb für mehr als 5 Minuten
- Inhalt der Markierung (benutzerdefinierte HTML-Markierungen erforderlich): Die aktuelle Wartezeit in Minuten wird in die Markierung selbst aufgenommen.
Schritt 2: Verbindung zu Echtzeitdatenquellen konfigurieren
Es gibt mehrere Möglichkeiten, eine Verbindung zu Datenquellen herzustellen. Die richtige Lösung hängt von Ihrem Anwendungsfall und Ihrer technischen Infrastruktur ab. In diesem Beispiel verwenden wir einen Pull-Ansatz, bei dem wir regelmäßig die aktualisierten Wartezeiten über HTTP-Anfragen (REST) anfordern. In den folgenden Abschnitten sehen Sie alternative Architekturen, die Push-Ansätze nutzen.
Damit unsere Anwendung auf die Wartezeitdaten von unserem Server zugreifen kann, nutzt unsere Architektur Cloud Functions for Firebase. Mit Cloud Functions können Sie eine Back-End-Funktion für den Zugriff auf und die Berechnung dieser Daten definieren. Wir nehmen auch die Firebase-Bibliothek in unsere Webanwendung auf, damit wir über eine HTTP-Anfrage auf unsere Cloud Functions-Funktion zugreifen können.
Im nächsten Schritt müssen wir dafür sorgen, dass die Daten für den Nutzer aktuell sind. Dazu richten wir mithilfe der JavaScript-Funktion setInterval
einen Timer mit einem Zeitlimit von 30 Sekunden ein. Jedes Mal, wenn der Timer ausgelöst wird, fordern wir wie oben beschrieben aktualisierte Wartezeitdaten an. Sobald wir die neuen Daten erhalten, muss die Darstellung der Kartenmarkierungen aktualisiert werden. Im nächsten Schritt wird beschrieben, wie diese Änderungen vorgenommen werden.
Schritt 3 – Kartenmarkierungen rendern
Wir können jetzt erweiterte Markierungen verwenden, um die stilisierten Markierungen auf der Karte zu rendern. Erweiterte Markierungen können auf Karten gerendert werden, die mit der Maps JavaScript API der Google Maps Platform erstellt wurden. Wenn Sie erweiterte Markierungen verwenden, muss der Karten-ID-Parameter in der JS-Kartenanfrage enthalten sein.
Im unten gezeigten Code-Snippet erstellen wir die Markierungen und definieren den Inhalt der Markierung durch Erstellen eines HTML-div-Elements:
// 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]
}));
Im letzten Schritt aktualisieren Sie den Markierungstext und den CSS-Stil für jedes Geschäft. Mit dem folgenden Code werden die aktualisierten Daten zu den Wartezeiten gelesen und jeder Filialmarkierung basierend auf der Wartezeit ein Stil zugewiesen:
// 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";
In der Karte wird jetzt unsere vorhandene API für Wartezeiten verwendet, um aktuelle Wartezeiten für Nutzer zu visualisieren:
Alternative Möglichkeiten zum Herstellen einer Verbindung mit Echtzeit-Datenquellen
Es gibt verschiedene Möglichkeiten, eine Verbindung zu Echtzeit-Datenquellen herzustellen. Unten werden zwei alternative Optionen beschrieben: Firebase Cloud Messaging und WebSocket. Unabhängig davon, für welchen Ansatz Sie sich entscheiden, sollten Sie die folgenden Faktoren berücksichtigen, damit Ihr Kartentool weiterhin leistungsstark ist:
- Häufigkeit der Aktualisierungen
- Datenvolumen
- Anzahl der Markierungen in der Kartenansicht
- Hardware- und Browserfunktionen
Firebase Cloud Messaging
Firebase Cloud Messaging ist ein Push-Ansatz. Bei diesem Ansatz senden Sie jedes Mal Aktualisierungen an die Kartenanwendung, wenn Wartezeitdaten im Back-End aktualisiert werden. Aktualisierungsmeldungen lösen eine Callback-Funktion aus, mit der das Aussehen und der Inhalt der Markierung aktualisiert werden.
Eine Sache, die Sie vor der Auswahl dieser Architektur berücksichtigen sollten, ist, dass eine dauerhafte Serververbindung für jeden Browser, der die Kartenanwendung ausführt, aufrechterhalten werden muss. Die Ausführung kann daher teurer sein und bei Verbindungsproblemen weniger zuverlässig sein.
WebSockets
WebSockets sind ein weiterer Push-basierter Ansatz, um Daten aktuell zu halten. Ähnlich wie im vorherigen Szenario können Sie WebSockets verwenden, um eine dauerhafte Verbindung zwischen Ihrem Back-End und Ihrer Kartenanwendung herzustellen. Die Funktionen dieser Methode ähneln denen von Firebase Cloud Messaging, es ist jedoch möglicherweise zusätzlicher Arbeitsaufwand bei der Konfiguration der erforderlichen Infrastruktur erforderlich.
Fazit
Entwickler können Echtzeit-Datenquellen mit erweiterten Markierungen kombinieren, um intuitive Visualisierungen in Google Maps zu erstellen. Es gibt mehrere Möglichkeiten, diese Datenquellen zu verbinden, abhängig von den Kartenanforderungen, der Nutzerhardware und dem Browser sowie dem Datenvolumen. Die integrierten Daten können dann verwendet werden, um das Erscheinungsbild der erweiterten Markierungen in Echtzeit zu steuern und so eine dynamische Erfahrung für die Nutzer zu ermöglichen.
Nächste Aktionen
Weiterführende Informationen:
- Erweiterte Markierungen – Google Developer Center
- Markierungen mit benutzerdefiniertem HTML erstellen
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Beitragende
Hauptautoren:
Jim Leflar | Google Maps Platform Solutions Engineer
John Branigan | Senior Customer Engineer bei Google Cloud
Steve Barrett | Google Maps Platform Solutions Engineer