Marker in Echtzeit mit Firebase

Mit der Google Maps Platform können Kunden einzigartige Erlebnisse schaffen, indem sie das visuelle Design ihrer Kartenmarkierungen mit erweiterten Markierungen anpassen. In diesem Dokument erfahren Sie, wie Kunden einen Schritt weiter gehen und Markierungen erstellen können, die sich dynamisch auf der Grundlage von Echtzeitdaten ändern.

Das Hero-Image zeigt eine Google Maps JS-Karte mit San Francisco im Mittelpunkt. An mehreren Orten werden farbige Markierungen mit der Angabe „2 Min.“ oder „4 Min.“ angezeigt.“ Die Farben und Inhalte werden im Laufe der Zeit aktualisiert.

Kartenmarkierungen sind ein nützliches Tool, um Nutzern umfassende Kartenerlebnisse zu bieten. Markierungsattribute wie Größe, Farbe und Form können zusätzliche Informationen zu jedem markierten Ort vermitteln. In einigen Fällen können sich diese zusätzlichen Informationen dynamisch ändern und der Entwickler möchte, dass die Kartendarstellung aktualisiert wird, damit der Nutzer immer aktuelle Informationen sieht.

In diesem Dokument verwenden wir ein Beispiel zur Veranschaulichung: Eine Einzelhandelskette möchte eine Karte verwenden, um Nutzern die Wartezeiten in den Geschäften anzuzeigen. Diese Architektur könnte jedoch auch für viele andere Anwendungsfälle verwendet werden. Hier sind ein paar zusätzliche Ideen:

  • Verfügbarkeit von Hotelzimmern: Auf einer Karte mit Hotelsuchergebnissen ist die Aktualität der Zimmerverfügbarkeit ein wichtiges Signal, das Nutzer dazu veranlassen kann, ein Hotelzimmer zu reservieren, wenn die Verfügbarkeit abnimmt.
  • Verfügbarkeit von Parkplätzen: Auf einer Karte mit Parkplätzen können Nutzer einen Zielort auswählen, an dem sie bei ihrer Ankunft einen Parkplatz finden.
  • Geöffnete, bald schließende und geschlossene Restaurants: Auf einer Karte mit Suchergebnissen für Restaurants ist es wichtig, dass Nutzer wissen, ob ein Restaurant möglicherweise geschlossen ist, wenn sie dort ankommen.

Lösung für dynamische erweiterte Markierungen

Sie können eine Karte mit erweiterten Markierungen erstellen, um dynamische Daten zu visualisieren. Wie bereits erwähnt, ist der Anwendungsfall eine Einzelhandelskette, die ihr Warteschlangenverwaltungssystem an der Kasse nutzt, um Wartezeiten für Nutzer zu schätzen und zu visualisieren. Dies ist die Anwendungsarchitektur:

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

Schritt 1: Attribute für die visuelle Darstellung festlegen

Im ersten Schritt müssen Sie eine oder mehrere Standortunterkünfte festlegen, die Nutzern angezeigt werden sollen. In diesem Fall möchten wir nur eine Eigenschaft anzeigen: die aktuelle Wartezeit an jedem Geschäft, gemessen in Minuten.

Im nächsten Schritt wählen Sie ein oder mehrere entsprechende Markierungsattribute aus, um die Wartezeit auf der Kartenmarkierung visuell darzustellen. Die Liste der Markierungsattribute ist standardmäßig in der PinElement-Spezifikation verfügbar. Sie können auch benutzerdefiniertes HTML für umfangreichere Anpassungsoptionen verwenden.

In diesem Beispiel verwenden wir zwei Markierungsattribute, um Wartezeitdaten zu visualisieren:

  • Markierungsfarbe: Blau für Wartezeiten unter 5 Minuten, Gelb für längere Wartezeiten
  • Markierungsinhalt (erfordert benutzerdefinierte HTML-Markierungen): Wir fügen die aktuelle Wartezeit in Minuten in die Markierung ein.

Schritt 2: Verbindung zu Echtzeit-Datenquellen 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 die aktualisierten Wartezeitdaten regelmäßig über HTTP-Anfragen (REST) anfordern. In den folgenden Abschnitten werden alternative Architekturen mit Push-Ansätzen vorgestellt.

Damit unsere Anwendung auf die Wartezeitdaten von unserem Server zugreifen kann, nutzt unsere Architektur Cloud Functions for Firebase. Mit Cloud Functions können wir eine Backend-Funktion definieren, um auf diese Daten zuzugreifen und sie zu berechnen. Außerdem binden wir die Firebase-Bibliothek in unsere Webanwendung ein, 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 bleiben. Dazu richten wir mit 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, müssen wir die Darstellung der Kartenmarkierungen aktualisieren. Im nächsten Schritt wird beschrieben, wie Sie diese Änderungen vornehmen.

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, müssen Sie den Parameter für die Karten-ID in die JS-Kartenanfrage einfügen.

Im folgenden Code-Snippet werden die Markierungen erstellt und ihr Inhalt wird durch Erstellen eines HTML-div-Elements definiert:

// 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 werden der Markierungstext und das CSS-Styling für jedes Geschäft aktualisiert. Mit dem folgenden Code werden die aktualisierten Wartezeitdaten gelesen und jeder Markierung wird 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";

Die Karte verwendet jetzt unsere vorhandene Wait Times API, um Nutzern aktuelle Wartezeiten anzuzeigen:

Das Hero-Image zeigt eine Google Maps JS-Karte mit San Francisco im Mittelpunkt. An mehreren Orten werden farbige Markierungen mit der Aufschrift „2 Min.“ oder „4 Min.“ angezeigt. Die Farben und Inhalte werden im Laufe der Zeit aktualisiert.

Alternative Möglichkeiten zum Herstellen einer Verbindung zu Echtzeit-Datenquellen

Es gibt verschiedene Möglichkeiten, eine Verbindung zu Echtzeit-Datenquellen herzustellen. Im Folgenden werden zwei alternative Optionen beschrieben: Firebase Cloud Messaging und Websockets. Unabhängig davon, welchen Ansatz Sie wählen, sollten Sie die folgenden Faktoren berücksichtigen, damit Ihr Kartentool leistungsfähig bleibt:

  • Häufigkeit der Updates
  • 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 die Wartezeitdaten im Backend aktualisiert werden. Aktualisierungsnachrichten lösen eine Callback-Funktion aus, mit der das Aussehen und der Inhalt der Markierung aktualisiert werden.

Bevor Sie sich für diese Architektur entscheiden, sollten Sie bedenken, dass für jeden Browser, in dem die Kartenanwendung ausgeführt wird, eine dauerhafte Serververbindung aufrechterhalten werden muss. Aus diesem Grund kann die Ausführung teurer und bei Verbindungsproblemen weniger stabil sein.

WebSockets

WebSockets sind ein weiterer Push-basierter Ansatz, um Daten auf dem neuesten Stand zu halten. Ähnlich wie im vorherigen Szenario können Sie WebSockets verwenden, um eine persistente Verbindung zwischen Ihrem Backend und Ihrer Kartenanwendung herzustellen. Die funktionalen Vorteile dieses Ansatzes sind ähnlich wie bei Firebase Cloud Messaging. Es kann jedoch zusätzlicher Aufwand für die Konfiguration der erforderlichen Infrastruktur erforderlich sein.

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, je nach Kartenanforderungen, Hardware und Browser des Nutzers sowie Datenvolumen. Die integrierten Daten können dann verwendet werden, um das Erscheinungsbild der erweiterten Markierungen in Echtzeit zu steuern und so eine dynamische Nutzererfahrung zu ermöglichen.

Nächste Aktionen

Weitere Informationen:

Beitragende

Hauptautoren:

Jim Leflar | Google Maps Platform Solutions Engineer

John Branigan | Google Cloud Platform Sr. Customer Engineer

Steve Barrett | Google Maps Platform Solutions Engineer