Erweitertes Place Search-Element (Vorabversion)

Das AdvancedPlaceSearchElement ist ein HTML-Element, das die Ergebnisse einer Ortssuche in einer Liste rendert. Es gibt zwei Möglichkeiten, das gmp-advanced-place-search Element zu konfigurieren:

Sowohl die Suche in der Nähe als auch die Textsuche bieten dieselben erweiterten Funktionen, darunter das Anpassen von Aktionsschaltflächen, das Filtern von Rezensionen und Medien, das Konfigurieren der Ortsattribution sowie die Verarbeitung der Ortsauswahl und von Fehlern.

Anfrage „Search nearby“

Wählen Sie im Menü einen Ortstyp aus, um Suchergebnisse in der Nähe für diesen Ortstyp zu sehen.

Die Suche in der Nähe ist hauptsächlich so konfiguriert, dass nach Ortstyp und Standort gesucht wird, und die Ergebnisse können mit der rankPreference Property nach Entfernung oder Beliebtheit sortiert werden. Weitere Informationen finden Sie in der Referenzdokumentation zur PlaceNearbySearchRequestElement Klasse.

In diesem Beispiel wird das Element „Advanced Place Search“ als Antwort auf eine Suche in der Nähe mit einem vom Nutzer ausgewählten Ortstyp gerendert. Außerdem wird ein AdvancedPlaceDetailsCompactElement für den ausgewählten Ort angezeigt.

Wenn Sie das Element „Advanced Place Search“ der Karte hinzufügen möchten, fügen Sie der HTML-Seite ein gmp-advanced-place-search Element mit einem verschachtelten gmp-place-nearby-search-request Element hinzu. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

Mit dem select Element kann der Nutzer im Menü einen Ortstyp auswählen. Der Einfachheit halber sind nur drei Ortstypen aufgeführt: Restaurant, Café, und Ladestation für Elektrofahrzeuge. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

Wenn der Nutzer im Menü einen Ortstyp auswählt, wird das gmp-place-nearby-search-request Element aktualisiert und das Element „Advanced Place Search“ zeigt die Ergebnisse an.

Anfrage „Search by text“

Geben Sie einen Suchbegriff in das Eingabefeld ein und klicken Sie auf die Schaltfläche Search (Suchen), um eine Liste von Orten zu erhalten, die dem Begriff entsprechen.

Die Textsuche ist hauptsächlich so konfiguriert, dass anhand einer Textabfrage und eines Standorts gesucht wird. Die Ergebnisse können nach Preisklasse, Bewertung und danach gefiltert werden, ob der Ort derzeit geöffnet ist. Die Ergebnisse können auch nach Entfernung oder Beliebtheit mit der rankPreference Property sortiert werden. Weitere Informationen finden Sie in der Referenzdokumentation zur PlaceTextSearchRequestElement Klasse.

In diesem Beispiel wird das Element „Advanced Place Search“ als Antwort auf eine Nutzer Texteingabe gerendert. Außerdem wird ein AdvancedPlaceDetailsCompactElement für den ausgewählten Ort angezeigt.

Wenn Sie das Element „Advanced Place Search“ der Karte hinzufügen möchten, fügen Sie der HTML-Seite ein gmp-advanced-place-search Element mit einem verschachtelten gmp-place-text-search-request Element hinzu. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

Mit dem Element input kann der Nutzer Suchtext eingeben. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

Wenn der Nutzer auf die Schaltfläche Search (Suchen) klickt, wird die Suchfunktion ausgeführt, das Element gmp-place-text-search-request wird aktualisiert und das Element „Advanced Place Search“ zeigt die Ergebnisse an.

Erweiterte Funktionen

Aktionsschaltflächen anpassen

Fügen Sie Aktionsschaltflächen als untergeordnete Elemente in das <template slot="place-list-item"> Element der Komponente „Advanced Place Search“ ein. Verwenden Sie <gmp-place-link> für standard Navigationsverbindungen und geben Sie das action Attribut explizit an. Optional können Sie das Attribut slot angeben. Gültige vordefinierte Aktionen sind open-website, open-directions, open-map, und call. Wenn das Attribut slot weggelassen wird, wird standardmäßig action-main verwendet. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

Rezensionen und Medien filtern

In diesem Codebeispiel werden nur Medien und Rezensionen angezeigt, in denen „Kaffee“ erwähnt wird.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

Ortsattribution konfigurieren

Wenn Sie die visuelle Attribution konfigurieren möchten, fügen Sie ein <gmp-place-attribution> Element hinzu, um übergreifende Datenattributionskonfigurationen der Maps API anzuzeigen, z. B. die Quelle eines Fotos oder einer Rezension. Es muss als direktes gleichgeordnetes Element des <template> hinzugefügt werden. Attributionen, die innerhalb des <template> Elements platziert werden, werden ignoriert. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

Ortsauswahl und Fehler verarbeiten

Wenn das Attribut selectable vorhanden ist, können Sie auf das Ereignis gmp-select warten, um den vom Nutzer ausgewählten Ort abzurufen. Sie können auch auf das gmp-error Ereignis warten, um Szenarien zu verarbeiten, in denen Ortsdaten nicht abgerufen werden können. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});