高度なプレイス検索要素（プレビュー版）

AdvancedPlaceSearchElement は、場所の検索結果をリストで表示する HTML 要素です。 gmp-advanced-place-search要素を構成する方法は 2 つあります。

Nearby Search と Text Search はどちらも、 高度な機能（アクション ボタンのカスタマイズ、レビューとメディアのフィルタ、Place アトリビューションの構成、 場所の選択とエラーの処理など）を提供します。

Nearby Search リクエスト

メニューから場所のタイプを選択すると、その場所のタイプの Nearby Search の結果が表示されます。

Nearby Search は主に、場所のタイプと場所で検索するように構成されています。 結果は、距離または人気度でランク付けできます。 rankPreference プロパティを使用します。詳細については、 PlaceNearbySearchRequestElement クラスのリファレンス ドキュメントをご覧ください。

この例では、ユーザーが選択した場所のタイプで Nearby Search を実行した結果として、Advanced Place Search 要素が表示されます。また、選択した場所の AdvancedPlaceDetailsCompactElement も表示されます。

Advanced Place Search 要素を地図に追加するには、ネストされた gmp-place-nearby-search-request 要素を含む gmp-advanced-place-search 要素を HTML ページに追加します。 

<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>

select 要素を使用すると、ユーザーは メニューから場所のタイプを選択できます。ここでは、レストラン、カフェ、 EV 充電ステーションの 3 つの場所のタイプのみをリスト表示しています。 

<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>

ユーザーがメニューから場所のタイプを選択すると、 gmp-place-nearby-search-request 要素が更新され、 Advanced Place Search 要素に結果が表示されます。

Search by text リクエスト

入力フィールドに検索キーワードを入力して [検索] ボタンをクリックすると、 そのキーワードに一致する場所のリストが表示されます。

Text Search は主に、テキストクエリと 場所を使用して検索するように構成されています。結果は、料金レベル、評価、現在営業中かどうかで 絞り込むことができます。結果は、距離または人気度 を使用してrankPreference プロパティでランク付けすることもできます。詳細については、 PlaceTextSearchRequestElement クラスのリファレンス ドキュメントをご覧ください。

この例では、ユーザーがテキストを入力した結果として、Advanced Place Search 要素が表示されます。また、選択した場所の AdvancedPlaceDetailsCompactElement も表示されます。

Advanced Place Search 要素を地図に追加するには、ネストされた gmp-place-text-search-request 要素を含む gmp-advanced-place-search 要素を HTML ページに追加します。 

<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>

input 要素を使用すると、ユーザーは検索テキストを入力できます。

<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>

ユーザーが [Search] ボタンをクリックすると、検索関数が実行され、 gmp-place-text-search-request 要素が更新され、 Advanced Place Search 要素に結果が表示されます。

上級者向け機能

アクション ボタンをカスタマイズする

Advanced Place Search コンポーネントの <template slot="place-list-item"> 要素内に、アクション ボタンを子として追加します。標準的なナビゲーション接続には <gmp-place-link> を使用し、action 属性を明示的に指定します。必要に応じて、slot 属性を指定できます。有効な 事前定義アクションは、open-website、 open-directions、open-map、call です。`slot` 属性を省略すると、デフォルトで slot になります action-main. 

<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>

レビューとメディアをフィルタする

次のコードサンプルでは、「コーヒー」という単語を含むメディアとレビューのみが表示されます。

<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>

Place アトリビューションを構成する

ビジュアル アトリビューションを構成するには、 <gmp-place-attribution> 要素を追加して、写真やレビューのソースなど、Maps API のデータ アトリビューション構成全体を表示します。 これは、<template> の直接の兄弟として追加する必要があります。 <template> 要素の 内部 に配置されたアトリビューションは無視されます。

<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>

場所の選択とエラーを処理する

selectable 属性が存在する場合は、 gmp-select イベントをリッスンして、ユーザーが選択した場所を取得できます。 gmp-error イベントをリッスンして、場所のデータの取得に失敗した場合のシナリオを適切に処理することもできます。 

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);
});