Mit erweiterten Markierungen und Firebase Kunden in Echtzeit ansprechen

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.

Das Hero-Image zeigt eine Google Maps JS-Karte, auf der San Francisco zentriert ist. An einigen Orten sind farbige Markierungen zu sehen, auf denen „2 Min.“, „4 Min.“ steht.

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:

Ein Architekturdiagramm zeigt den Nutzer, der auf die Webanwendung zugreift. Google-Infrastruktur für die Webanwendung (GMP und Firebase Cloud Functions) Firebase Cloud Functions greift auf Live-Daten aus dem Backend des Kunden zu.

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:

Das Hero-Image zeigt eine Google Maps JS-Karte, auf der San Francisco zentriert ist. An einigen Orten sind farbige Markierungen zu sehen, auf denen „2 Min.“, „4 Min.“ steht.

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:

Beitragende

Hauptautoren:

Jim Leflar | Google Maps Platform Solutions Engineer

John Branigan | Senior Customer Engineer bei Google Cloud

Steve Barrett | Google Maps Platform Solutions Engineer