Diese Seite wurde von der Cloud Translation API übersetzt.

Interaktive Filialsuche mit Places UI Kit erstellen

Ziel

In diesem Dokument werden die wichtigsten Schritte zum Entwickeln einer interaktiven Filialsuche mit der Google Maps Platform beschrieben, insbesondere die Maps JavaScript API und das Places UI Kit: Element „Ortsdetails“. Sie erfahren, wie Sie eine Karte mit Geschäftsstandorten erstellen, eine Liste der sichtbaren Geschäfte dynamisch aktualisieren und umfangreiche Informationen zu Orten für jedes Geschäft anzeigen.

Vorbereitung

Folgende Kenntnisse sind empfehlenswert:

Maps JavaScript API: Damit können Sie eine Karte auf Ihrer Seite anzeigen und das Places UI Kit importieren.
Erweiterte Markierungen: Mit dieser Option können Sie Markierungen auf der Karte anzeigen.
Places UI Kit: Wird verwendet, um Informationen zu Ihren Geschäften in der Benutzeroberfläche anzuzeigen.

Aktivieren Sie die Maps JavaScript API und das Places UI Kit für Ihr Projekt.

Prüfen Sie, ob Sie die Maps JavaScript API geladen und die erforderlichen Bibliotheken für erweiterte Markierungen und das Places UI Kit importiert haben, bevor Sie beginnen. In diesem Dokument wird außerdem vorausgesetzt, dass Sie mit Webentwicklung vertraut sind, einschließlich HTML, CSS und JavaScript.

Ersteinrichtung

Fügen Sie der Seite zuerst eine Karte hinzu. Auf dieser Karte werden Markierungen für Ihre Ladenstandorte angezeigt.

Es gibt zwei Möglichkeiten, einer Seite eine Karte hinzuzufügen:

HTML-Webkomponente „gmp-map“ verwenden
JavaScript verwenden

Wählen Sie die Methode aus, die für Ihren Anwendungsfall am besten geeignet ist. Beide Implementierungsmethoden funktionieren mit diesem Leitfaden.

Demo

In dieser Demo wird ein Beispiel für die Funktionsweise der Filialsuche gezeigt. Dabei werden Google-Niederlassungen in der Bay Area angezeigt. Das Element „Place Details“ wird für jeden Standort zusammen mit einigen Beispielattributen angezeigt.

Laden und Anzeigen von Filialen

In diesem Abschnitt laden wir Ihre Geschäftsdaten auf die Karte und stellen sie dort dar. In diesem Leitfaden wird davon ausgegangen, dass Sie Informationen zu Ihren bestehenden Geschäften haben, auf die Sie zurückgreifen können. Ihre Geschäftsdaten können aus verschiedenen Quellen stammen, z. B. aus Ihrer Datenbank. In diesem Beispiel gehen wir von einer lokalen JSON-Datei (stores.json) mit einem Array von Geschäftsobjekten aus, die jeweils einen Standort repräsentieren. Jedes Objekt sollte mindestens einen name, einen location (mit lat und lng) und einen place_id enthalten.

Es gibt verschiedene Möglichkeiten, die Orts-IDs für Ihre Geschäftsstandorte abzurufen, falls Sie diese noch nicht haben. Weitere Informationen finden Sie in der Dokumentation zu Orts-IDs.

Ein Beispiel für einen Store-Detailseintrag in Ihrer stores.json-Datei könnte so aussehen: Es gibt Felder für Name, Standort (Breiten-/Längengrad) und Orts-ID. Es gibt ein Objekt, das die Öffnungszeiten des Geschäfts enthält (abgeschnitten). Außerdem gibt es zwei boolesche Werte, mit denen sich kundenspezifische Merkmale des Geschäftsstandorts beschreiben lassen.

{
  "name": "Example Store Alpha",
  "location": { "lat": 51.51, "lng": -0.12 },
  "place_id": "YOUR_STORE_PLACE_ID",
  "opening_hours": { "Monday": "09:00 - 17:00", "...": "..." },
  "new_store_design": true,
  "indoor_seating": false
}

Rufen Sie in Ihrem JavaScript-Code die Daten für Ihre Geschäftsstandorte ab und zeigen Sie für jeden Standort eine Markierung auf der Karte an.

Hier ein Beispiel dafür: Diese Funktion nimmt ein Objekt mit den Details für die Geschäfte an und erstellt anhand des Standorts jedes Geschäfts eine Markierung.

function displayInitialMarkers(storeLocations) {
    if (!AdvancedMarkerElement || !LatLng || !mapElement) return;
    storeLocations.forEach(store => {
        if (store.location) {
            const marker = new AdvancedMarkerElement({
                position: new LatLng(store.location.lat, store.location.lng),
                title: store.name
            });
            mapElement.appendChild(marker);
        }
    });
}

Nachdem Sie Ihre Geschäfte geladen und Markierungen für ihre Standorte auf der Karte angezeigt haben, erstellen Sie mit HTML und CSS eine Seitenleiste, in der Details zu Ihren einzelnen Geschäften angezeigt werden.

Hier ein Beispiel dafür, wie Ihre Filialsuche in dieser Phase aussehen könnte:

Auf Änderungen des Karten-Darstellungsbereichs achten

Optimieren Sie die Leistung und Nutzerfreundlichkeit Ihrer App, indem Sie Markierungen und Details in der Seitenleiste nur dann anzeigen lassen, wenn sich die entsprechenden Orte im sichtbaren Kartenbereich (Darstellungsbereich) befinden. Dazu müssen Sie auf Änderungen des Karten-Viewports warten, diese Ereignisse entprellen und dann nur die erforderlichen Markierungen neu zeichnen.

Hängen Sie einen Event-Listener an das Inaktivitätsereignis der Karte an. Dieses Ereignis wird ausgelöst, nachdem alle Schwenk- oder Zoomvorgänge abgeschlossen sind. So wird ein stabiler Darstellungsbereich für Ihre Berechnungen bereitgestellt.

map.addListener('idle', debounce(updateMarkersInView, 300));

Im obigen Code-Snippet wird auf das idle-Ereignis gewartet und eine debounce-Funktion aufgerufen. Mit einer Debounce-Funktion wird sichergestellt, dass die Logik zum Aktualisieren von Markierungen erst ausgeführt wird, nachdem der Nutzer eine kurze Zeit lang nicht mehr mit der Karte interagiert hat. So wird die Leistung verbessert.

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

Der obige Code ist ein Beispiel für eine Debounce-Funktion. Sie nimmt eine Funktion und ein Verzögerungsargument entgegen, die im Inaktivitätslistener übergeben werden. Eine Verzögerung von 300 Millisekunden reicht aus, damit die Karte stehen bleibt, ohne dass die Benutzeroberfläche merklich verzögert wird. Nach Ablauf dieses Zeitlimits wird die übergebene Funktion aufgerufen, in diesem Fall updateMarkersInView.

Die Funktion updateMarkersInView sollte die folgenden Aktionen ausführen:

Alle vorhandenen Markierungen von der Karte entfernen

Prüfen Sie, ob sich der Standort des Geschäfts innerhalb der aktuellen Kartengrenzen befindet, z. B.:

if (map.getBounds().contains(storeLatLng)) {
  // logic
}

Fügen Sie in der If-Bedingung oben Code hinzu, um Markierungen und Geschäftsdetails in der Seitenleiste anzuzeigen, wenn sich der Geschäftsstandort im Kartenviewport befindet.

Umfangreiche Ortsdetails mit dem Element „Place Details“ anzeigen

In dieser Phase werden in der Anwendung alle Standorte angezeigt und Nutzer können sie basierend auf dem Kartenviewport filtern. Um die Nutzerfreundlichkeit zu verbessern, werden mithilfe des Elements „Ortsdetails“ umfangreiche Details zu jedem Geschäft hinzugefügt, z. B. Fotos, Rezensionen und Informationen zur Barrierefreiheit. In diesem Beispiel wird das Kompaktelement „Place Details“ verwendet.

Jeder Geschäftsstandort in Ihrer Datenquelle muss eine entsprechende PlaceID haben. Diese ID identifiziert den Standort eindeutig in Google Maps und ist für das Abrufen der Details erforderlich. Normalerweise erwerben Sie diese Orts-IDs im Voraus und speichern sie für jeden Ihrer Store-Einträge.

Kompaktelement „Place Details“ in die Anwendung einbinden

Wenn ein Geschäft im aktuellen Kartenviewport liegt und in der Seitenleiste gerendert wird, können Sie dynamisch ein kompaktes Element für „Details zum Ort“ erstellen und einfügen.

Rufen Sie für den derzeit verarbeiteten Store die Orts-ID aus Ihren Daten ab. Mit der Orts-ID wird festgelegt, an welchem Ort das Element angezeigt wird.

Erstelle in JavaScript dynamisch eine Instanz von PlaceDetailsCompactElement. Außerdem wird eine neue PlaceDetailsPlaceRequestElement erstellt, die Place ID wird an sie übergeben und an die PlaceDetailsCompactElement angehängt. Konfigurieren Sie abschließend mit PlaceContentConfigElement den Inhalt, der im Element angezeigt werden soll.

Bei der folgenden Funktion wird davon ausgegangen, dass die erforderlichen Place UI Kit-Bibliotheken importiert und im Gültigkeitsbereich verfügbar sind, in dem diese Funktion aufgerufen wird, und dass storeData, das an die Funktion übergeben wird, place_id enthält.

Diese Funktion gibt das Element zurück und der aufrufende Code ist dafür verantwortlich, es dem DOM anzuhängen.

function createPlaceDetailsCompactElement(storeData) {
    // Create the main details component
    const detailsCompact = new PlaceDetailsCompactElement();
    detailsCompact.setAttribute('orientation', 'vertical'); // Or 'horizontal'

    // Specify the Place ID
    const placeRequest = new PlaceDetailsPlaceRequestElement();
    placeRequest.place = storeData.place_id;
    detailsCompact.appendChild(placeRequest);

    // Configure which content elements to display
    const contentConfig = new PlaceContentConfigElement();
    // For this example, we'll render media, rating, accessibility, and attribution:
    contentConfig.appendChild(new PlaceMediaElement({ lightboxPreferred: true }));
    contentConfig.appendChild(new PlaceRatingElement());
    contentConfig.appendChild(new PlaceAccessibleEntranceIconElement());
    // Configure attribution
    const placeAttribution = new PlaceAttributionElement();
    placeAttribution.setAttribute('light-scheme-color', 'gray');
    placeAttribution.setAttribute('dark-scheme-color', 'gray');
    contentConfig.appendChild(placeAttribution);
    detailsCompact.appendChild(contentConfig);
    // Return the element
    return detailsCompact;
}

Im Beispielcode oben ist das Element so konfiguriert, dass die Fotos des Orts, die Rezensionsbewertung und Informationen zur Barrierefreiheit angezeigt werden. Sie können die Anzeige anpassen, indem Sie andere verfügbare Inhaltselemente hinzufügen oder entfernen. Eine vollständige Liste der verfügbaren Optionen finden Sie in der Dokumentation zu PlaceContentConfigElement.

Das kompakte Element „Place Details“ unterstützt das Stilisieren über benutzerdefinierte CSS-Eigenschaften. So können Sie das Erscheinungsbild (Farben, Schriftarten usw.) an das Design Ihrer Anwendung anpassen. Wenden Sie diese benutzerdefinierten Eigenschaften in Ihrer CSS-Datei an. Eine Liste der unterstützten CSS-Eigenschaften finden Sie in der Referenzdokumentation zu PlaceDetailsCompactElement.

Hier ein Beispiel dafür, wie Ihre Bewerbung in dieser Phase aussehen könnte:

Verbesserung der Filialsuche

Sie haben eine solide Grundlage für Ihre App zur Standortsuche geschaffen. Überlegen Sie nun, wie Sie die Funktionalität erweitern und eine noch umfassendere, nutzerorientiertere Umgebung schaffen können.

Automatische Vervollständigung hinzufügen

Sie können die Suche nach Regionen für Nutzer verbessern, indem Sie eine Suchanfrage mit Place Autocomplete verknüpfen. Wenn Nutzer eine Adresse, einen Stadtteil oder einen POI eingeben und einen Vorschlag auswählen, wird die Karte automatisch auf diesen Ort ausgerichtet, wodurch die Geschäfte in der Nähe aktualisiert werden. Fügen Sie dazu ein Eingabefeld hinzu und binden Sie die Funktion „Place Autocomplete“ daran an. Wenn Sie einen Vorschlag auswählen, kann die Karte auf diesem Punkt zentriert werden. Denken Sie daran, die Ergebnisse auf Ihren Geschäftsbereich auszurichten oder einzuschränken.

Standort erkennen

Bieten Sie Nutzern, insbesondere auf Mobilgeräten, sofort relevante Inhalte, indem Sie eine Funktion implementieren, mit der der aktuelle geografische Standort ermittelt wird. Nachdem Sie die Browserberechtigung zum Erkennen des Standorts erhalten haben, wird die Karte automatisch auf den Standort des Nutzers ausgerichtet und die nächstgelegenen Geschäfte werden angezeigt. Nutzer schätzen diese Funktion In meiner Nähe, wenn sie nach sofort verfügbaren Optionen suchen. Fügen Sie eine Schaltfläche oder einen ersten Prompt hinzu, um den Zugriff auf die Standortermittlung anzufordern.

Entfernung und Wegbeschreibung anzeigen

Wenn ein Nutzer einen für ihn interessanten Shop gefunden hat, können Sie die Kaufabwicklung durch die Einbindung der Routes API erheblich verbessern. Berechnen und zeigen Sie für jeden aufgeführten Shop die Entfernung zum aktuellen Standort des Nutzers oder zum gesuchten Ort an. Außerdem muss eine Schaltfläche oder ein Link vorhanden sein, über die bzw. den mithilfe der Routes API eine Route vom Standort des Nutzers zum ausgewählten Geschäft generiert wird. Sie können diese Route dann auf Ihrer Karte anzeigen oder einen Link zu Google Maps für die Navigation einfügen, um einen nahtlosen Übergang vom Finden eines Geschäfts zum tatsächlichen Erreichen zu ermöglichen.

Wenn Sie diese Erweiterungen implementieren, können Sie mehr Funktionen der Google Maps Platform nutzen, um einen umfassenderen und praktischeren Store Locator zu erstellen, der direkt auf die gängigen Anforderungen der Nutzer eingeht.

Fazit

In diesem Leitfaden wurden die wichtigsten Schritte zum Erstellen einer interaktiven Filialsuche veranschaulicht. Sie haben gelernt, wie Sie mit der Maps JavaScript API Ihre eigenen Geschäftsstandorte auf einer Karte anzeigen, die sichtbaren Geschäfte basierend auf Änderungen des Darstellungsbereichs dynamisch aktualisieren und vor allem, wie Sie Ihre eigenen Geschäftsdaten gemäß dem Places UI Kit anzeigen. Wenn Sie Ihre vorhandenen Geschäftsinformationen, einschließlich Orts-IDs, mit dem „Place Details“-Element kombinieren, können Sie umfangreiche, standardisierte Details für jeden Ihrer Standorte präsentieren und so eine solide Grundlage für eine nutzerfreundliche Filialsuche schaffen.

Mit der Maps JavaScript API und dem Places UI Kit können Sie leistungsstarke, komponentenbasierte Tools für die schnelle Entwicklung anspruchsvoller standortbasierter Anwendungen nutzen. Durch die Kombination dieser Funktionen können Sie für Ihre Nutzer ansprechende und informative Inhalte erstellen.

Beitragende

Henrik Valve | DevX-Ingenieur

Interaktive Filialsuche mit Places UI Kit erstellen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.