Diese Seite wurde von der Cloud Translation API übersetzt.

Interaktive Filialsuche mit Places UI Kit erstellen

Ziel

In diesem Dokument werden die wichtigsten Schritte zur Entwicklung einer interaktiven Filialsuche mit der Google Maps Platform beschrieben, insbesondere mit der Maps JavaScript API und dem Places UI Kit: Element „Ortsdetails“. Sie erfahren, wie Sie eine Karte erstellen, auf der Geschäftsstandorte angezeigt werden, wie Sie eine Liste sichtbarer Geschäfte dynamisch aktualisieren und wie Sie für jedes Geschäft detaillierte Ortsinformationen anzeigen.

Vorbereitung

Wir empfehlen, dass Sie mit Folgendem vertraut sind:

Maps JavaScript API: Wird verwendet, um eine Karte auf Ihrer Seite anzuzeigen und das Places UI Kit zu importieren.
Erweiterte Markierungen: Dienen zum Anzeigen von Markierungen auf der Karte.
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. Außerdem wird in diesem Dokument davon ausgegangen, dass Sie mit der Webentwicklung vertraut sind, einschließlich HTML, CSS und JavaScript.

Ersteinrichtung

Als Erstes müssen Sie der Seite eine Karte hinzufügen. Auf dieser Karte werden Pins für Ihre Geschäftsstandorte angezeigt.

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

Mit einer HTML-Webkomponente vom Typ „gmp-map“
JavaScript verwenden

Wählen Sie die Methode aus, die am besten zu Ihrem Anwendungsfall passt. Beide Implementierungsmethoden sind mit diesem Leitfaden kompatibel.

Demo

In diesem Demovideo wird ein Beispiel für die Verwendung der Händlersuche gezeigt. Es werden Google-Bürostandorte in der Bay Area angezeigt. Das Place Details-Element wird für jeden Standort zusammen mit einigen Beispielattributen angezeigt.

Filialen laden und anzeigen

In diesem Abschnitt laden wir Ihre Geschäftsdaten und zeigen sie auf der Karte an. In diesem Leitfaden wird davon ausgegangen, dass Sie ein Repository mit Informationen zu Ihren bestehenden Geschäften haben, aus dem Sie Daten abrufen 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 Store-Objekten aus, die jeweils einen Standort darstellen. Jedes Objekt sollte mindestens name, location (mit lat und lng) und place_id enthalten.

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

Ein Beispiel für einen Eintrag mit Geschäftsdetails in Ihrer stores.json-Datei: Es gibt Felder für Name, Standort (Breitengrad/Längengrad) und Orts-ID. Es gibt ein Objekt, in dem die Öffnungszeiten des Geschäfts gespeichert werden (gekürzt). Außerdem gibt es zwei boolesche Werte, mit denen sich besondere 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: Diese Funktion verwendet ein Objekt mit den Details für die Geschäfte und erstellt einen Marker basierend auf dem Standort jedes Geschäfts.

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, können Sie mit HTML und CSS eine Seitenleiste erstellen, in der Details zu den einzelnen Geschäften angezeigt werden.

So könnte Ihre Filialsuche in dieser Phase aussehen:

Auf Änderungen des Karten-Darstellungsbereichs reagieren

Um die Leistung und Nutzerfreundlichkeit zu optimieren, sollten Sie Ihre Anwendung so aktualisieren, dass Markierungen und Details in der Seitenleiste nur angezeigt werden, wenn sich die entsprechenden Standorte 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 Leerlaufereignis der Karte an. Dieses Ereignis wird ausgelöst, nachdem alle Schwenk- oder Zoomvorgänge abgeschlossen sind. So erhalten Sie einen stabilen Viewport für Ihre Berechnungen.

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

Im Code-Snippet oben wird auf das idle-Ereignis gewartet und eine debounce-Funktion aufgerufen. Durch die Verwendung einer Debounce-Funktion wird sichergestellt, dass die Logik für die Aktualisierung der Markierungen erst ausgeführt wird, nachdem der Nutzer die Interaktion mit der Karte für einen kurzen Zeitraum beendet hat. Dadurch 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 akzeptiert eine Funktion und ein Verzögerungsargument, die an den Leerlauf-Listener übergeben werden. Eine Verzögerung von 300 ms reicht aus, um zu warten, bis sich die Karte nicht mehr bewegt, ohne die Benutzeroberfläche merklich zu verlangsamen. 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 Kartenbegrenzungen befindet, z. B.:

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

Schreiben Sie innerhalb der oben stehenden if-Anweisung Code, um die Marker und die Geschäftsdetails in der Seitenleiste anzuzeigen, wenn sich der Standort des Geschäfts im Karten-Viewport befindet.

Umfangreiche Ortsdetails mit dem Element „Place Details“ anzeigen

In dieser Phase werden alle Geschäftsstandorte in der Anwendung angezeigt. Nutzer können sie anhand des Karten-Viewports filtern. Um dies zu verbessern, werden mithilfe des Place Details-Elements umfassende Details zu jedem Geschäft hinzugefügt, z. B. Fotos, Rezensionen und Informationen zur Barrierefreiheit. In diesem Beispiel wird das Place Details Compact-Element verwendet.

Jeder Geschäftsstandort in Ihrer Datenquelle muss eine entsprechende Place-ID haben. Diese ID identifiziert den Standort in Google Maps eindeutig und ist unerlässlich, um seine Details abzurufen. Normalerweise rufen Sie diese Orts-IDs im Voraus ab und speichern sie für jeden Ihrer Geschäftsdatensätze.

„Place Details Compact“-Element in die Anwendung einbinden

Wenn ein Geschäft im aktuellen Karten-Viewport liegt und in der Seitenleiste gerendert wird, können Sie dynamisch ein kompaktes Element mit Ortsdetails dafür erstellen und einfügen.

Rufen Sie für das aktuelle Geschäft, das verarbeitet wird, die Orts-ID aus Ihren Daten ab. Mit der Orts-ID wird festgelegt, welcher Ort im Element angezeigt wird.

Erstellen Sie in JavaScript dynamisch eine Instanz von PlaceDetailsCompactElement. Außerdem wird ein neues PlaceDetailsPlaceRequestElement erstellt, die Place ID wird an dieses übergeben und an PlaceDetailsCompactElement angehängt. Konfigurieren Sie schließlich mit PlaceContentConfigElement die Inhalte, die im Element angezeigt werden sollen.

Bei der folgenden Funktion wird davon ausgegangen, dass die erforderlichen Place UI Kit-Bibliotheken importiert wurden und im Bereich 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 an das 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 es die Fotos des Orts, die Rezensionsbewertung und die Informationen zur Barrierefreiheit anzeigt. Sie können die Ausgabe anpassen, indem Sie andere verfügbare Inhaltselemente hinzufügen oder entfernen. Eine Liste aller verfügbaren Optionen finden Sie in der Dokumentation zu PlaceContentConfigElement.

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

So könnte Ihre Anwendung in dieser Phase aussehen:

Händlersuche optimieren

Sie haben eine solide Grundlage für Ihre Standortfinder-Anwendung geschaffen. Überlegen Sie sich nun, wie Sie die Funktionalität erweitern und eine noch bessere, nutzerorientierte Erfahrung schaffen können.

Automatische Vervollständigung hinzufügen

Sie können die Suche nach Geschäften verbessern, indem Sie eine Sucheingabe mit Place Autocomplete integrieren. Wenn Nutzer eine Adresse, einen Stadtteil oder einen POI eingeben und einen Vorschlag auswählen, muss die Karte automatisch auf diesen Ort zentriert werden, wodurch eine Aktualisierung der Geschäfte in der Nähe ausgelöst wird. Fügen Sie dazu ein Eingabefeld hinzu und verknüpfen Sie es mit der Place Autocomplete-Funktion. Wenn Sie einen Vorschlag auswählen, kann die Karte auf diesen Punkt zentriert werden. Denken Sie daran, die Ergebnisse auf Ihr Einsatzgebiet zu beschränken oder zu gewichten.

Standort ermitteln

Bieten Sie sofortige Relevanz, insbesondere für mobile Nutzer, indem Sie eine Funktion zum Erkennen ihres aktuellen geografischen Standorts implementieren. Nachdem Sie die Browserberechtigung zum Erkennen des Standorts erhalten haben, zentrieren Sie die Karte automatisch auf die Position des Nutzers und zeigen Sie die nächstgelegenen Geschäfte an. Nutzer schätzen diese In meiner Nähe-Funktion sehr, wenn sie nach sofortigen Optionen suchen. Fügen Sie eine Schaltfläche oder einen ersten Prompt hinzu, um den Standortzugriff anzufordern.

Entfernung und Wegbeschreibung anzeigen

Sobald ein Nutzer ein Geschäft gefunden hat, das ihn interessiert, können Sie den Prozess durch die Integration der Routes API erheblich verbessern. Berechnen und zeigen Sie für jedes aufgeführte Geschäft die Entfernung vom aktuellen Standort des Nutzers oder vom gesuchten Ort an. Stellen Sie außerdem eine Schaltfläche oder einen Link bereit, mit dem 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. So wird der Übergang von der Suche nach einem Geschäft zum tatsächlichen Erreichen des Ziels nahtlos.

Durch die Implementierung dieser Erweiterungen können Sie mehr Funktionen der Google Maps Platform nutzen, um eine umfassendere und benutzerfreundlichere Händlersuche zu erstellen, die direkt auf häufige Nutzeranforderungen eingeht.

Fazit

In diesem Leitfaden wurden die wichtigsten Schritte zum Erstellen einer interaktiven Standortsuche beschrieben. Sie haben gelernt, wie Sie Ihre eigenen Filialstandorte mithilfe der Maps JavaScript API auf einer Karte darstellen, die sichtbaren Filialen basierend auf Änderungen des Viewports dynamisch aktualisieren und Ihre eigenen Filialdaten in Übereinstimmung mit dem Places UI Kit anzeigen. Wenn Sie Ihre vorhandenen Geschäftsinformationen, einschließlich Orts-IDs, mit dem Element „Place Details“ verwenden, können Sie für jeden Ihrer Standorte umfangreiche, standardisierte Details präsentieren. So schaffen Sie eine solide Grundlage für eine benutzerfreundliche Standortsuche.

Mit der Maps JavaScript API und dem Places UI Kit können Sie leistungsstarke, komponentenbasierten Tools nutzen, um schnell anspruchsvolle standortbezogene Anwendungen zu entwickeln. Durch die Kombination dieser Funktionen können Sie ansprechende und informative Inhalte für Ihre Nutzer erstellen.

Beitragende

Henrik Valve | DevX Engineer

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