Mit erweiterten Markierungen und Firebase Kunden in Echtzeit ansprechen

Mit der Google Maps Platform können Kunden das visuelle Design ihrer Kartenmarkierungen mithilfe von erweiterten Markierungen anpassen und so individuelle Karten erstellen. In diesem Dokument erfahren Sie, wie Kunden einen Schritt weiter gehen und Markierungen erstellen können, die sich dynamisch anhand von Echtzeitdaten ändern.

Das Hero-Image zeigt eine Google Maps JS-Karte, die auf San Francisco ausgerichtet ist. An mehreren Orten werden farbige Markierungen mit den Angaben „2 Min.“ und „4 Min.“ angezeigt.

Kartenmarkierungen sind ein nützliches Tool, um Nutzern eine umfassende Kartenansicht zu bieten. Markierungsattribute wie Größe, Farbe und Form können zusätzliche Informationen zu den einzelnen markierten Orten liefern. In einigen Fällen können sich diese zusätzlichen Informationen dynamisch ändern und der Entwickler möchte, dass die Kartenvisualisierung aktualisiert wird, um für Nutzer immer aktuelle Informationen zu liefern.

In diesem Artikel verwenden wir zu Veranschaulichung ein Beispiel: Eine Einzelhandelskette möchte Nutzern mithilfe einer Karte die Wartezeiten in ihren Geschäften anzeigen. Diese Architektur kann jedoch auch für viele andere Anwendungsfälle verwendet werden. Hier einige weitere Ideen:

  • Verfügbarkeit von Hotelzimmern: Auf einer Karte mit Hotelsuchergebnissen ist die Aktualität der Zimmerverfügbarkeit ein wichtiges Signal, das Nutzer dazu anregen kann, eine Hotelreservierung vorzunehmen, wenn das Inventar abnimmt.
  • Verfügbarkeit von Parkplätzen: Auf einer Karte mit Parkplätzen können Nutzer mit Sicherheit ein Ziel 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 ankommen.

Die Lösung für dynamische erweiterte Markierungen

Sehen wir uns nun an, wie Sie eine Karte mit erweiterten Markierungen erstellen, um dynamische Daten zu visualisieren. Wie bereits erwähnt, ist der Anwendungsfall eine Kette von Einzelhandelsgeschäften, die ihr Kassenverwaltungssystem für die Schätzung und Visualisierung der Wartezeiten für Nutzende nutzt. Das 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 Livedaten aus dem Backend des Kunden zu.

Schritt 1: Attribute für die visuelle Darstellung festlegen

Im ersten Schritt müssen Sie eine oder mehrere Standorteigenschaften festlegen, die Nutzern angezeigt werden sollen. In diesem Fall möchten wir nur eine Property präsentieren: die aktuelle Wartezeit an jedem Standort, gemessen in Minuten.

Im nächsten Schritt wählen Sie ein oder mehrere entsprechende Markierungsattribute aus, um die Wartezeit auf der Kartenmarkierung visuell zu kennzeichnen. Die Liste der Markierungsattribute ist in der PinElement-Spezifikation enthalten. Mit benutzerdefiniertem HTML können Sie noch mehr Anpassungsoptionen nutzen.

In diesem Beispiel verwenden wir zwei Markierungsattribute, um Daten zur Wartezeit zu visualisieren:

  • Markierungsfarbe: Blau für eine Wartezeit von weniger als 5 Minuten, Gelb für eine Wartezeit von mehr als 5 Minuten
  • Markierungsinhalt (erfordert benutzerdefinierte HTML-Markierungen): Die aktuelle Wartezeit in Minuten wird in der Markierung selbst angezeigt.

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 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 auf unserem Server zugreifen kann, nutzt unsere Architektur Cloud Functions for Firebase. Mit Cloud Functions können wir eine Back-End-Funktion für den Zugriff auf und die Berechnung dieser Daten definieren. Wir binden auch die Firebase-Bibliothek in unsere Webanwendung ein, sodass wir über eine HTTP-Anfrage auf unsere Cloud Functions-Funktion zugreifen können.

Im nächsten Schritt sorgen wir dafür, dass die Daten für den Nutzer immer aktuell sind. Dazu richten wir einen Timer mit der JavaScript-Funktion setInterval mit einem Zeitlimit von 30 Sekunden ein. Jedes Mal, wenn der Timer ausgelöst wird, fordern wir wie oben beschrieben aktualisierte Daten zur Wartezeit an. Sobald wir die neuen Daten erhalten haben, müssen wir die Darstellung der Markierungen auf der Karte 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 „Karten-ID“ in die JS-Kartenanfrage aufnehmen.

Im folgenden Code-Snippet erstellen wir die Markierungen und definieren den Inhalt der Markierung, indem wir ein HTML-Div-Element erstellen:

// 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 das CSS-Styling für jeden Store. Im folgenden Code werden die aktualisierten Daten zu den Wartezeiten gelesen und jeder Ladenmarkierung wird ein Stil zugewiesen, der auf der Wartezeit basiert:

// 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";

Auf der Karte wird jetzt unsere vorhandene Wartezeit-API verwendet, um aktuelle Wartezeiten für Nutzer zu visualisieren:

Das Hero-Image zeigt eine Google Maps JS-Karte, in der San Francisco in der Mitte liegt. An mehreren Orten werden farbige Markierungen mit den Angaben „2 Min.“ und „4 Min.“ angezeigt.

Alternative Möglichkeiten zum Herstellen einer Verbindung zu Echtzeitdatenquellen

Es gibt verschiedene Möglichkeiten, eine Verbindung zu Echtzeitdatenquellen herzustellen. Unten sehen Sie zwei alternative Optionen: Firebase Cloud Messaging und WebSocket. Welchen Ansatz Sie auch 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. Mit diesem Ansatz senden Sie jedes Mal, wenn Wartezeitdaten im Back-End aktualisiert werden, Aktualisierungen an die Kartenanwendung. Aktualisierungsnachrichten lösen eine Callback-Funktion aus, deren Zweck es ist, das Aussehen und den Inhalt der Markierung zu aktualisieren.

Bevor Sie sich für diese Architektur entscheiden, sollten Sie berücksichtigen, 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 kostspieliger sein und im Zusammenhang mit Verbindungsproblemen weniger robust sein.

WebSockets

WebSockets sind ein weiterer pushbasierter 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 ähneln denen von Firebase Cloud Messaging. Es kann jedoch zusätzliche Arbeit erfordern, die erforderliche Infrastruktur zu konfigurieren.

Fazit

Entwickler können Echtzeitdatenquellen mit erweiterten Markierungen kombinieren, um intuitive Visualisierungen in Google Maps zu erstellen. Je nach Kartenanforderungen, Nutzerhardware und ‑browser sowie Datenvolumen gibt es mehrere Möglichkeiten, diese Datenquellen zu verbinden. Die integrierten Daten können dann verwendet werden, um das Erscheinungsbild der erweiterten Markierungen in Echtzeit zu steuern, was den Nutzern ein dynamisches Erlebnis bietet.

Nächste Aktionen

Weitere Informationen:

Beitragende

Hauptautoren:

Jim Leflar | Google Maps Platform Solutions Engineer

John Branigan | Senior Customer Engineer, Google Cloud Platform

Steve Barrett | Google Maps Platform Solutions Engineer