Diese Seite wurde von der Cloud Translation API übersetzt.

Was ist das Places UI Kit und wie können Sie damit ansprechende Lösungen entwickeln?

Einführung

Für Millionen von Nutzern weltweit ist Google Maps die erste Anlaufstelle für genaue und aktuelle Informationen zu Orten. Die umfangreiche Datenbank von Google mit über 250 Millionen Orten weltweit, einschließlich Nutzerrezensionen, Fotos und Bewertungen, bietet ein beispielloses Maß an Detailgenauigkeit und Vertrauen. Damit wir immer aktuelle und korrekte Daten bereitstellen können, nehmen wir täglich 100 Millionen Aktualisierungen an der Karte vor.

Das Places UI Kit ist eine sofort einsatzbereite, kostengünstige Komponentenbibliothek, die auf den umfangreichen Informationen zu Orten in Google Maps basiert. Damit können Sie die bewährte und vertraute Google Places-Funktion in Ihre Frontend-Anwendungen einbinden – auf einer Karte Ihrer Wahl.

Komponenten

Das Places UI Kit bietet eine Reihe einzelner UI-Komponenten, die unabhängig voneinander oder zusammen verwendet werden können, um eine nahtlose Places-Erfahrung zu schaffen.

Ortsdetails:In dieser Komponente werden detaillierte Informationen zu einem Ort gerendert, z. B. Name, Adresse, Telefonnummer, Website, Öffnungszeiten und Nutzerrezensionen.
Ortssuche:In dieser Komponente wird eine Liste mit Orten in der Nähe nach Kategorien oder über die Freitextsuche angezeigt.
Einfache automatische Vervollständigung von Orten:Mit dieser Komponente wird ein Texteingabefeld erstellt, in dem eine Drop-down-Liste mit vorhergesagten Orten angezeigt wird, die der Eingabe entsprechen.

Hauptvorteile des Places UI Kit

Einfache Bedienung:Mit minimalem Code können Sie die bewährte Google-Nutzererfahrung für Places in Ihre Apps einbinden.
Nutzung auf beliebigen Karten:Zum ersten Mal können Sie Places-Inhalte auf Karten verwenden, die nicht von Google stammen.
Vertraute Benutzeroberfläche:Die Komponenten bieten eine Benutzeroberfläche, die mit Google Maps übereinstimmt und daher für Nutzer intuitiv ist.
Anpassung:Das Places UI Kit bietet umfangreiche visuelle Anpassungsoptionen ohne Aufpreis. Sie können verschiedene Einstellungen und benutzerdefinierte CSS-Eigenschaften verwenden, um die Anzeigeelemente zu konfigurieren.
Kosteneffizient:Das Places UI Kit kann eine kostengünstigere Lösung sein als die direkte Verwendung der Places API.

Anwendungsfälle aus der Praxis

Das Places UI Kit kann in einer Vielzahl von Anwendungen verwendet werden, um die Nutzerfreundlichkeit zu verbessern.

Anwendungen zur lokalen Suche:Eine Anwendung für Aktivitäten kann die Place Search-Komponente verwenden, um eine Liste mit Restaurants, Cafés oder Sehenswürdigkeiten in der Nähe anzuzeigen. Wenn ein Nutzer einen Ort aus der Liste auswählt, können Sie mit der Komponente „Ortsdetails“ weitere Informationen zu diesem Ort anzeigen.
Reiseplanungsanwendungen:Eine Reiseanwendung kann die Ortssuche verwenden, damit Nutzer nach Hotels oder Sehenswürdigkeiten in einer bestimmten Stadt suchen können. In der Komponente „Ortsdetails“ können dann Fotos, Bewertungen und Rezensionen für jeden Ort angezeigt werden, um die Planung zu erleichtern.
Immobilienportale:Eine Immobilienanwendung kann eine Komponente für die Ortssuche verwenden, um verschiedene Kategorien von Orten in der Nähe anzuzeigen. So können potenzielle Käufer oder Mieter einer Immobilie vor einer Besichtigung herausfinden, ob die Umgebung ihren Anforderungen entspricht.
Messaging- und Social-Media-Anwendungen:Eine Messaging- und Social-Media-Anwendung kann mit Place Search nach Orten in der Nähe suchen und diese vorschlagen, damit Nutzer ganz einfach einen Treffpunkt finden. Mit der „Place Details“-Komponente können Sie umfangreiche Ortsinformationen anzeigen, wenn Nutzer Orte teilen. Mit der integrierten Google Maps-Schaltfläche können Nutzer ganz einfach und genau weitere Orte und Reiseinformationen in Google Maps aufrufen.

Anpassung

Die Inhalte und Stile der Komponenten des Places UI Kit können an Ihre Anforderungen angepasst werden.

Mit benutzerdefinierten CSS-Eigenschaften, z. B. den CSS-Eigenschaften für die Komponente „Ortsdetails“, können Sie das Erscheinungsbild der Komponenten an das Design Ihrer Anwendung anpassen. Sie können Farben, Schriftarten und andere visuelle Aspekte anpassen. Es ist wichtig, die Anforderungen an die Quellenangabe einzuhalten, wenn Sie visuelle Änderungen vornehmen. Mit der CSS-Eigenschaft --gmp-mat-color-primary können Sie beispielsweise die primäre Farbe für Links und die Anzahl der Rezensionen ändern.

Sie können die angezeigten Ortsinhalte mit einem verschachtelten gmp-place-content-config-Element auswählen und konfigurieren oder einfach gmp-place-all-content verwenden, um alle verfügbaren Inhalte anzuzeigen.

In der Dokumentation ist ein Anpassungstool verfügbar, mit dem Sie verschiedene Stilkonfigurationen visualisieren können.

Implementierungsleitfaden

Das Places UI Kit ist über Maps JavaScript und das Places SDK für Android und iOS verfügbar.

Erste Schritte

So verwenden Sie das Places UI Kit:

Google Cloud-Projekt einrichten: Sie benötigen ein Cloud-Projekt mit einem Rechnungskonto, um das Places UI Kit verwenden zu können.
Places UI Kit aktivieren: Sie müssen das Places UI Kit für Ihr Projekt aktivieren.
API-Schlüssel anfordern: Ein API-Schlüssel ist erforderlich, um Ihre Anfragen zu authentifizieren.

Weitere plattformspezifische Informationen finden Sie in den Startleitfäden für das Places UI Kit für JavaScript, Android und iOS.

Implementierungsbeispiel

Hier sehen Sie ein Beispiel für die Implementierung von Place Search und Place Details mit dynamischen JavaScript-Karten. Nutzer können anhand von Freitext nach Orten in der Nähe suchen. Wenn Sie in der Liste der Suchergebnisse auf einen Ort klicken, wird die Komponente „Ortsdetails“ auf den dynamischen Karten angezeigt.

Unten finden Sie die Code-Snippets. Die Demo und den vollständigen Code finden Sie in diesem GitHub-Repository.

Bevor Sie beginnen, müssen Sie die oben beschriebenen Schritte für den Einstieg in JavaScript ausführen.

Laden Sie die erforderlichen Bibliotheken in HTML.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Fügen Sie in HTML einen Kartencontainer, ein Texteingabefeld und eine Schaltfläche für die Suche hinzu. Dieser Kartencontainer enthält die dynamischen Karten, die in JavaScript erstellt werden. Im Eingabefeld können Nutzer Suchanfragen eingeben.

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Fügen Sie die „Place Search“-Komponente hinzu. Die „Place Search“-Komponente bietet horizontale und vertikale Layouts. In diesem Beispiel verwenden wir das horizontale Layout. Mit dem Attribut „selectable“ kann auf das Listenelement des Suchergebnisses geklickt werden. In diesem Fall wird das Ereignis „gmp-select“ ausgelöst.

Dem Element „gmp-place-search“ fügen wir zwei untergeordnete Elemente hinzu:

gmp-place-all-content wird verwendet, um alle verfügbaren Inhalte anzuzeigen.
Mit gmp-place-text-search-request wird das Element „Ortssuche“ konfiguriert.

In diesem Beispiel legen wir die Konfiguration in JavaScript fest.

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

Fügen Sie als Nächstes die Komponente „Ortsdetails“ hinzu. Sie ist in kompakten und vollständigen Layouts verfügbar, die jeweils vertikale und horizontale Ausrichtungen unterstützen. In diesem Beispiel wird das kompakte horizontale Layout verwendet. Wie bei der „Place Search“-Komponente fügen wir zwei untergeordnete Elemente hinzu:

gmp-place-all-content – Alle verfügbaren Inhalte werden angezeigt.
Mit gmp-place-details-place-request wird ein Ort ausgewählt.

In diesem Beispiel legen wir den Ort in JavaScript fest.

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

Importieren Sie in JavaScript die Bibliotheken, die wir für dieses Beispiel benötigen. Die Places Library importiert die Places UI Kit-Bibliothek für JavaScript.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

Dynamische Karten erstellen

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

Fügen Sie der Suchschaltfläche einen Click-Listener hinzu, um eine Ortssuche zu starten. Wenn die Suchergebnisse geladen werden, erstellen Sie Markierungen für jeden Ort und fügen Sie einen Klick-Listener hinzu. Wenn Sie auf eine Markierung klicken, werden die entsprechenden Ortsdetails angefordert und angezeigt.

Wenn Orte gefunden werden und das Place Search-Element geladen wird, wird die „places“-Property des Place Search-Elements mit einem Array von Ergebnissen gefüllt. Jedes Ergebnis ist ein Orts-Objekt, das die Orts-ID, die Koordinaten und den Darstellungsbereich enthält. Wenn Sie Details abrufen möchten, übergeben Sie entweder die Orts-ID oder das gesamte Ortsobjekt an das Element „Place Details“.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

Sehen Sie sich die Demo und den vollständigen Code in diesem GitHub-Repository an.

Quellen für die Entwicklung

Beitragende

Hauptautoren:

Teresa Qin | Google Maps Platform Solutions Engineer

Was ist das Places UI Kit und wie können Sie damit ansprechende Lösungen entwickeln? Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.