Ziel
In diesem Dokument werden die wichtigsten Schritte zur Entwicklung einer interaktiven Filialsuche mit der Google Maps Platform beschrieben. Dabei werden insbesondere die Maps JavaScript API und das Places UI Kit (Place Details-Element) verwendet. Sie erfahren, wie Sie eine Karte erstellen, auf der Geschäftsstandorte angezeigt werden, eine Liste der sichtbaren Geschäfte dynamisch aktualisieren und detaillierte Ortsinformationen für jedes Geschäft anzeigen.
Vorbereitung
Kenntnisse in den folgenden Bereichen werden empfohlen:
- Maps JavaScript API: Wird verwendet, um eine Karte auf Ihrer Seite anzuzeigen und das Places UI Kit zu importieren.
- Erweiterte Markierungen: Werden verwendet, um Markierungen auf der Karte anzuzeigen.
- 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 auch davon ausgegangen, dass Sie mit der Webentwicklung vertraut sind, einschließlich HTML, CSS und JavaScript.
Ersteinrichtung
Als Erstes fügen Sie der Seite eine Karte hinzu. Auf dieser Karte werden Markierungen für Ihre Geschäftsstandorte 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 Methoden zur Implementierung der Karte funktionieren mit diesem Leitfaden.
Geschäftsstandorte 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 vorhandenen 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 Geschäftsobjekten aus, die jeweils einen Geschäftsstandort darstellen. Jedes Objekt sollte mindestens ein name, ein location (mit lat und lng) und ein 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 Eintrag mit Geschäftsdetails in Ihrer stores.json-Datei könnte so aussehen.
Es gibt Felder für Name, Standort (Breitengrad/Längengrad) und Orts-ID. Es gibt ein Objekt, das die Öffnungszeiten des Geschäfts enthält (gekürzt). Außerdem gibt es zwei boolesche Werte, mit denen sich besondere Merkmale des Geschäfts 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 zu den Geschäften und erstellt eine Markierung basierend auf dem Standort der einzelnen Geschäfte.
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 haben und die Markierungen für ihre Standorte auf der Karte angezeigt werden, erstellen Sie mit HTML und CSS eine Seitenleiste, um Details zu den einzelnen Geschäften anzuzeigen.
So könnte Ihre Filialsuche in dieser Phase aussehen:
Auf Änderungen des Darstellungsbereichs der Karte achten
Um die Leistung und die Nutzerfreundlichkeit zu optimieren, sollten Sie Ihre Anwendung so aktualisieren, dass Markierungen und Details in der Seitenleiste nur dann angezeigt werden, wenn sich die entsprechenden Orte im sichtbaren Kartenbereich (Darstellungsbereich) befinden. Dazu müssen Änderungen am Karten-Viewport erfasst, diese Ereignisse entprellt und dann nur die erforderlichen Markierungen neu gezeichnet werden.
Hängen Sie einen Event-Listener an das „idle“-Ereignis der Karte an. Dieses Ereignis wird ausgelöst, nachdem alle Schwenk- oder Zoomvorgänge abgeschlossen sind. Es bietet einen stabilen Darstellungsbereich für Ihre Berechnungen.
map.addListener('idle', debounce(updateMarkersInView, 300));
Das obige Code-Snippet wartet auf das idle-Ereignis und ruft eine debounce-Funktion auf. Mit einer Debounce-Funktion wird sichergestellt, dass die Logik für die Markierungsaktualisierung erst ausgeführt wird, wenn der Nutzer die Interaktion mit der Karte für kurze Zeit 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 eine Beispiel-Debounce-Funktion. Sie verwendet ein Funktions- und ein Verzögerungsargument, die im Idle-Listener übergeben werden. Eine Verzögerung von 300 ms reicht aus, um zu warten, bis sich die Karte nicht mehr bewegt, 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 löschen
Prüfen Sie, ob sich der Standort des Geschäfts innerhalb der aktuellen Kartengrenzen befindet, z. B.:
if (map.getBounds().contains(storeLatLng)) {
// logic
}
Schreiben Sie innerhalb der obigen if-Anweisung Code, um die Markierungen und Geschäftsdetails in der Seitenleiste anzuzeigen, wenn sich der Geschäftsstandort im Darstellungsbereich der Karte befindet.
Umfangreiche Ortsdetails mit dem Place Details-Element anzeigen
In dieser Phase werden in der Anwendung alle Filialen angezeigt und Nutzer können sie anhand des Karten-Darstellungsbereichs filtern. Um die Nutzerfreundlichkeit zu verbessern, werden mit dem Place Details-Element umfangreiche Details zu jedem Geschäft hinzugefügt, z. B. Fotos, Rezensionen und Informationen zur Barrierefreiheit. In diesem Beispiel wird das kompakte Element „Place Details“ verwendet.
Für jeden Geschäftsstandort in Ihrer Datenquelle muss eine entsprechende Orts-ID vorhanden sein. Diese ID identifiziert den Ort auf Google Maps eindeutig und ist für das Abrufen der Details erforderlich. In der Regel rufen Sie diese Orts-IDs im Voraus ab und speichern sie für jeden Ihrer Geschäftseinträge.
Kompaktes Element für Place Details in die Anwendung einbinden
Wenn ein Geschäft im aktuellen Kartenansichtsfenster liegt und in der Seitenleiste gerendert wird, können Sie dynamisch ein kompaktes Element für Place Details erstellen und einfügen.
Rufen Sie für das aktuell verarbeitete Geschäft 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-Objekt erstellt, an das die Orts-ID übergeben wird. Dieses Objekt wird an PlaceDetailsCompactElement angehängt. Verwenden Sie schließlich PlaceContentConfigElement, um den Inhalt zu konfigurieren, der im Element angezeigt wird.
Bei der folgenden Funktion wird davon ausgegangen, dass die erforderlichen Place UI Kit-Bibliotheken importiert wurden und im Bereich, in dem diese Funktion aufgerufen wird, verfügbar sind. Außerdem muss das an die Funktion übergebene storeData-Objekt place_id enthalten.
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 Fotos des Ortes, die Rezensionsbewertung und Informationen zur Barrierefreiheit angezeigt werden. Dies kann durch Hinzufügen oder Entfernen anderer verfügbarer Inhaltselemente angepasst werden. Alle verfügbaren Optionen finden Sie in der Dokumentation zu PlaceContentConfigElement.
Das kompakte Element „Place Details“ unterstützt die Gestaltung ü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.
Beispiel dafür, wie Ihre Anwendung in dieser Phase aussehen könnte:
Filialsuche verbessern
Sie haben eine solide Grundlage für Ihre Store Finder-Anwendung geschaffen. Überlegen Sie sich nun, wie Sie die Funktionalität erweitern und eine noch umfassendere, nutzerorientiertere Umgebung schaffen können.
Automatische Vervollständigung hinzufügen
Wenn Sie eine Sucheingabe mit Place Autocomplete einbinden, können Nutzer leichter Bereiche finden, in denen sie nach Geschäften suchen können. Wenn Nutzer eine Adresse, ein Viertel oder einen POI eingeben und einen Vorschlag auswählen, wird die Karte automatisch auf diesen Ort zentriert und die Geschäfte in der Nähe werden aktualisiert. Fügen Sie dazu ein Eingabefeld hinzu und verknüpfen Sie es mit der Place Autocomplete-Funktion. Wenn ein Vorschlag ausgewählt wird, kann die Karte auf diesen Punkt zentriert werden. Konfigurieren Sie sie so, dass die Ergebnisse auf Ihr Einsatzgebiet beschränkt oder bevorzugt werden.
Standort erkennen
Bieten Sie sofortige Relevanz, insbesondere für mobile Nutzer, indem Sie eine Funktion zur Erkennung des aktuellen geografischen Standorts implementieren. Nachdem Sie die Browserberechtigung zur Standortermittlung erhalten haben, zentrieren Sie die Karte automatisch auf die Position des Nutzers und zeigen Sie die nächstgelegenen Geschäfte an. Nutzer schätzen die Funktion In meiner Nähe sehr, wenn sie nach sofort verfügbaren Optionen suchen. Fügen Sie eine Schaltfläche oder eine erste Aufforderung hinzu, um den Zugriff auf den Standort anzufordern.
Entfernung und Wegbeschreibung anzeigen
Sobald ein Nutzer ein Geschäft gefunden hat, das ihn interessiert, können Sie die Nutzererfahrung durch die Einbindung der Routes API erheblich verbessern. Berechnen Sie für jedes Geschäft, das Sie auflisten, die Entfernung vom aktuellen Standort des Nutzers oder vom gesuchten Standort und zeigen Sie sie an. Stellen Sie außerdem einen Button oder Link bereit, über den mit der Routes API eine Route vom Standort des Nutzers zum ausgewählten Geschäft generiert wird. Anschließend können Sie diese Route auf Ihrer Karte anzeigen oder für die Navigation zu Google Maps verlinken. So schaffen Sie einen nahtlosen Übergang von der Suche nach einem Geschäft bis zur Ankunft dort.
Durch die Implementierung dieser Erweiterungen können Sie mehr Funktionen der Google Maps Platform nutzen, um eine umfassendere und praktischere Filialsuche zu erstellen, die direkt auf die gängigen Nutzeranforderungen eingeht.
Fazit
In diesem Leitfaden wurden die wichtigsten Schritte zum Erstellen einer interaktiven Filialsuche beschrieben. Sie haben gelernt, wie Sie Ihre eigenen Geschäftsstandorte mithilfe der Maps JavaScript API auf einer Karte anzeigen, die sichtbaren Geschäfte dynamisch an Änderungen des Darstellungsbereichs anpassen und Ihre eigenen Geschäftsdaten im Einklang mit dem Places UI Kit anzeigen. Wenn Sie Ihre vorhandenen Geschäftsinformationen, einschließlich Orts-IDs, mit dem Place Details-Element verwenden, 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 standortbezogener Anwendungen anbieten. Durch die Kombination dieser Funktionen können Sie ansprechende und informative Inhalte für Ihre Nutzer erstellen.
Beitragende
Henrik Valve | DevX Engineer