Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

進階地點搜尋元素 (預先發布版)

AdvancedPlaceSearchElement 是 HTML 元素，可將地點搜尋結果以清單形式呈現。設定 gmp-advanced-place-search 元素的方法有兩種：

如要在特定區域搜尋特定類型的地點，請使用搜尋附近要求，透過 PlaceNearbySearchRequestElement 顯示搜尋結果。
如要根據文字查詢在特定區域搜尋地點，請使用依文字搜尋要求，透過 PlaceTextSearchRequestElement 顯示搜尋結果。

「附近地點搜尋」和「文字搜尋」功能都提供相同的進階功能，包括自訂動作按鈕、篩選評論和媒體、設定地點出處，以及處理地點選取和錯誤。

搜尋附近的要求

從選單中選取地點類型，即可查看附近該類型地點的搜尋結果。

「搜尋附近」主要設定為依地點類型和位置搜尋，並可使用 rankPreference 屬性依距離或熱門程度排序結果。詳情請參閱 PlaceNearbySearchRequestElement 類別參考文件。

這個範例會根據 Nearby Search 結果，以及使用者選取的地點類型，轉譯「Advanced Place Search」元素。此外，也會顯示所選地點的 AdvancedPlaceDetailsCompactElement。

如要在地圖中新增進階地點搜尋元素，請在 HTML 網頁中加入 gmp-advanced-place-search 元素，並在其中巢狀加入 gmp-place-nearby-search-request 元素。

<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 元素從選單中選擇地點類型。為求簡潔，我們只列出三種地點類型：餐廳、咖啡廳和電動車充電站。

<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 元素會更新，進階地點搜尋元素則會顯示結果。

依文字搜尋要求

在輸入欄位中輸入搜尋字詞，然後按一下「搜尋」按鈕，即可取得符合該字詞的地點清單。

文字搜尋功能主要用於透過文字查詢和位置資訊進行搜尋，並可依價格等級、評分和目前是否營業來篩選結果。您也可以使用 rankPreference 屬性，依距離或熱門程度排序結果。詳情請參閱 PlaceTextSearchRequestElement 類別參考文件。

這個範例會回應使用者輸入的文字，並算繪進階地點搜尋元素。此外，也會顯示所選地點的 AdvancedPlaceDetailsCompactElement。

如要在地圖中新增進階地點搜尋元素，請在 HTML 網頁中加入 gmp-advanced-place-search 元素，並在其中巢狀加入 gmp-place-text-search-request 元素。

<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」元素中顯示結果。

進階功能

自訂動作按鈕

在「進階地點搜尋」元件的 <template slot="place-list-item"> 元素中，新增動作按鈕做為子項。使用 <gmp-place-link> 進行標準導覽連線，並明確指定 action 屬性。您可以視需要指定 slot 屬性。有效預先定義的動作為 open-website、open-directions、open-map 和 call。如果省略 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>

設定地點出處

如要設定視覺化出處資訊，請新增 <gmp-place-attribution> 元素，顯示整體地圖 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);
});