本頁面由 Cloud Translation API 翻譯而成。

使用 Places UI Kit 建構在地搜尋應用程式

1. 事前準備

本程式碼研究室會說明如何使用 Google 地圖平台 Places UI Kit，建構全互動式在地搜尋應用程式。

螢幕截圖：完成的 PlaceFinder 應用程式，顯示紐約地圖和標記、含有搜尋結果的側欄，以及開啟的詳細資料資訊卡。

必要條件

已設定必要 API 和憑證的 Google Cloud 專案。
具備 HTML 和 CSS 的基礎知識。
瞭解新版 JavaScript。
新版網路瀏覽器，例如最新版 Chrome。
您選擇的文字編輯器。

學習內容

使用 JavaScript 類別建構對應應用程式。
使用網頁元件顯示地圖
使用 Place Search 元素執行文字搜尋並顯示結果。
透過程式建立及管理自訂 AdvancedMarkerElement 地圖標記。
使用者選取地點時，顯示地點詳細資料元素。
使用 Geocoding API 建立動態且易於使用的介面。

軟硬體需求

已啟用計費功能的 Google Cloud 專案
Google 地圖平台 API 金鑰
地圖 ID
已啟用下列 API：
- Maps JavaScript API
- Places UI Kit
- Geocoding API

2. 做好準備

在接下來的啟用步驟中，您需要啟用 Maps JavaScript API、Places UI Kit 和 Geocoding API。

設定 Google 地圖平台

如果您尚未建立 Google Cloud Platform 帳戶，以及啟用計費功能的專案，請參閱「開始使用 Google 地圖平台」指南，建立帳單帳戶和專案。

在 Cloud 控制台中，按一下專案下拉式選單，然後選取要用於本程式碼研究室的專案。

在 Google Cloud Marketplace 中，啟用本程式碼研究室所需的 Google 地圖平台 API 和 SDK。如要瞭解如何操作，請觀看這部影片或參閱這份說明文件。
在 Cloud Console 的「憑證」頁面中產生 API 金鑰。你可以按照這部影片或這份文件中的步驟操作。所有 Google 地圖平台要求都需要 API 金鑰。

3. 應用程式殼層和功能地圖

在第一個步驟中，我們會為應用程式建立完整的視覺版面配置，並為 JavaScript 建立乾淨的類別架構。這為我們奠定了穩固的基礎。完成本節後，您將擁有一個樣式化頁面，其中顯示互動式地圖。

建立 HTML 檔案

首先，建立名為 index.html 的檔案。這個檔案會包含應用程式的完整結構，包括標頭、搜尋篩選器、側欄、地圖容器和必要的網頁元件。

將下列程式碼複製到 index.html。請務必將 YOUR_API_KEY_HERE 替換為您的 Google 地圖平台 API 金鑰，並將 DEMO_MAP_ID 替換為您的 Google 地圖平台地圖 ID。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Local Search App</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google Fonts: Roboto -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- GMP Bootstrap Loader -->
    <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_HERE",
        v: "weekly",
        libraries: "places,maps,marker,geocoding"
      });
    </script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <!-- Header for search controls -->
    <header class="top-header">
        <div class="logo">
            <svg viewBox="0 0 24 24" width="28" height="28"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="currentColor"></path></svg>
            <span>PlaceFinder</span>
        </div>
        <div class="search-container">
            <input
              type="text"
              id="query-input"
              placeholder="e.g., burger in New York"
              value="burger"
            />
            <button id="search-button" aria-label="Search">Search</button>
        </div>
        <div class="filter-container">
            <label class="open-now-label">
              <input type="checkbox" id="open-now-filter"> Open Now
            </label>
            <select id="rating-filter" aria-label="Minimum rating">
              <option value="0" selected>Any rating</option>
              <option value="1">1+ ★</option>
              <option value="2">2+ ★★</option>
              <option value="3">3+ ★★★</option>
              <option value="4">4+ ★★★★</option>
              <option value="5">5 ★★★★★</option>
            </select>
             <select id="price-filter" aria-label="Price level">
              <option value="0" selected>Any Price</option>
              <option value="1">$</option>
              <option value="2">$$</option>
              <option value="3">$$$</option>
              <option value="4">$$$$</option>
            </select>
        </div>
    </header>

    <!-- Main content area -->
    <div class="app-container">
      <!-- Left Panel: Results -->
      <div class="sidebar">
          <div class="results-header">
            <h2 id="results-header-text">Results</h2>
          </div>
          <div class="results-container">
              <gmp-place-search id="place-search-list" class="hidden" selectable>
                <gmp-place-all-content></gmp-place-all-content>
                <gmp-place-text-search-request></gmp-place-text-search-request>
              </gmp-place-search>

              <div id="placeholder-message" class="placeholder">
                  <p>Your search results will appear here.</p>
              </div>

              <div id="loading-spinner" class="spinner-overlay">
                  <div class="spinner"></div>
              </div>
          </div>
      </div>

      <!-- Right Panel: Map -->
      <div class="map-container">
        <gmp-map
          center="40.758896,-73.985130"
          zoom="13"
          map-id="DEMO_MAP_ID"
        >
        </gmp-map>
        <div id="details-container">
            <gmp-place-details-compact>
                <gmp-place-details-place-request></gmp-place-details-place-request>
                <gmp-place-all-content></gmp-place-all-content>
            </gmp-place-details-compact>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

建立 CSS 檔案

接著，建立名為 style.css 的檔案。我們現在會新增所有必要的樣式，從一開始就建立簡潔的現代外觀。這個 CSS 會處理整體版面配置、顏色、字型，以及所有 UI 元素的外觀。

將下列程式碼複製到 style.css：

/* style.css */
:root {
  --primary-color: #1a73e8;
  --text-color: #202124;
  --text-color-light: #5f6368;
  --background-color: #f8f9fa;
  --panel-background: #ffffff;
  --border-color: #dadce0;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  color: var(--text-color);
}

.hidden {
  display: none !important;
}

.top-header {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--panel-background);
  gap: 24px;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-color);
}

.search-container {
  display: flex;
  flex-grow: 1;
  max-width: 720px;
}

.search-container input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px 0 0 8px;
  font-size: 16px;
  transition: box-shadow 0.2s ease;
}

.search-container input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.search-container button {
  padding: 0 20px;
  border: 1px solid var(--primary-color);
  border-radius: 0 8px 8px 0;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.search-container button:hover {
  background-color: #185abc;
}

.filter-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.filter-container select, .open-now-label {
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--panel-background);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.filter-container select:hover, .open-now-label:hover {
  border-color: #c0c2c5;
}

.open-now-label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.app-container {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.sidebar {
  width: 35%;
  min-width: 380px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  background-color: var(--panel-background);
  overflow: hidden;
}

.results-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.results-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.results-container {
  flex-grow: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
}

.placeholder p {
  color: var(--text-color-light);
  font-size: 1.1rem;
}

gmp-place-search {
  width: 100%;
}

.map-container {
  flex-grow: 1;
  position: relative;
}

gmp-map {
  width: 100%;
  height: 100%;
}

.spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.spinner-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e0e0e0;
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

gmp-place-details-compact {
  width: 350px;
  display: none;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

gmp-place-details-compact::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 12px;
    background-color: var(--panel-background);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

建立 JavaScript 應用程式類別

最後，建立名為 script.js 的檔案。我們會在名為 PlaceFinderApp 的 JavaScript 類別中建構應用程式。這樣一來，程式碼就能維持井然有序，狀態管理也會更簡潔。

這段初始程式碼會定義類別、在 constructor 中找出所有 HTML 元素，並建立 init() 方法來載入 Google 地圖平台程式庫。

將下列程式碼複製到 script.js：

// script.js
class PlaceFinderApp {
  constructor() {
    // Get all DOM element references
    this.queryInput = document.getElementById('query-input');
    this.priceFilter = document.getElementById('price-filter');
    this.ratingFilter = document.getElementById('rating-filter');
    this.openNowFilter = document.getElementById('open-now-filter');
    this.searchButton = document.getElementById('search-button');
    this.placeSearch = document.getElementById('place-search-list');
    this.gMap = document.querySelector('gmp-map');
    this.loadingSpinner = document.getElementById('loading-spinner');
    this.resultsHeaderText = document.getElementById('results-header-text');
    this.placeholderMessage = document.getElementById('placeholder-message');
    this.placeDetailsWidget = document.querySelector('gmp-place-details-compact');
    this.placeDetailsRequest = this.placeDetailsWidget.querySelector('gmp-place-details-place-request');
    this.searchRequest = this.placeSearch.querySelector('gmp-place-text-search-request');

    // Initialize instance variables
    this.map = null;
    this.geocoder = null;
    this.markers = {};
    this.detailsPopup = null;
    this.PriceLevel = null;
    this.isSearchInProgress = false;

    // Start the application
    this.init();
  }

  async init() {
    // Import libraries
    await google.maps.importLibrary("maps");
    const { Place, PriceLevel } = await google.maps.importLibrary("places");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { Geocoder } = await google.maps.importLibrary("geocoding");

    // Make classes available to the instance
    this.PriceLevel = PriceLevel;
    this.AdvancedMarkerElement = AdvancedMarkerElement;

    this.map = this.gMap.innerMap;
    this.geocoder = new Geocoder();

    // We will add more initialization logic here in later steps.
  }
}

// Wait for the DOM to be ready, then create an instance of our app.
window.addEventListener('DOMContentLoaded', () => {
  new PlaceFinderApp();
});

API 金鑰限制

您可能需要為 API 金鑰新增限制，才能順利完成本程式碼研究室。如需更多資訊和操作指南，請參閱「限制 API 金鑰」。

檢查作業

在網路瀏覽器中開啟 index.html 檔案。您應該會看到一個頁面，頁首包含搜尋列和篩選器、側欄顯示「搜尋結果會顯示在這裡」訊息，以及以紐約市為中心的大地圖。在這個階段，搜尋控制項尚未啟用。

4. 實作搜尋函式

在本節中，我們將實作核心搜尋功能，讓應用程式運作起來。我們會編寫程式碼，在使用者點選「搜尋」按鈕時執行。我們會從一開始就採用最佳做法建構這項函式，妥善處理使用者互動，並避免競爭條件等常見錯誤。

完成這個步驟後，您就能點選搜尋按鈕，並在應用程式於背景擷取資料時，看到載入微調器。

建立搜尋方法

首先，在 PlaceFinderApp 類別中定義 performSearch 方法。這個函式將是搜尋邏輯的核心。我們也會導入執行個體變數 isSearchInProgress，做為「守門員」。這樣可避免使用者在搜尋進行中啟動新的搜尋，以免發生錯誤。

performSearch 內的邏輯可能看起來很複雜，因此我們會詳細說明：

系統會先檢查是否已在進行搜尋。如果沒有，則不會執行任何動作。
並將 isSearchInProgress 旗標設為 true，以「鎖定」函式。
顯示載入微調器，並準備 UI 以顯示新結果。
這會將搜尋要求的 textQuery 屬性設為 null。這是重要步驟，可強制網頁元件辨識新要求。
此方法使用 setTimeout，並有 0 延遲。這項標準 JavaScript 技術會排定其餘程式碼在下一個瀏覽器工作執行，確保元件先處理 null 值。即使使用者搜尋的內容完全相同，系統也一律會觸發新的搜尋。

新增事件接聽程式

接著，我們需要在使用者與應用程式互動時呼叫 performSearch 方法。我們會建立新的 attachEventListeners 方法，將所有事件處理程式碼集中在一處。目前，我們只會為搜尋按鈕的 click 事件新增監聽器。我們也會新增另一個事件的預留位置 gmp-load，這個事件會在下一個步驟中使用。

更新 JavaScript 檔案

使用下列程式碼更新 script.js 檔案。新增或變更的章節是 attachEventListeners 方法和 performSearch 方法。

// script.js
class PlaceFinderApp {
  constructor() {
    // Get all DOM element references
    this.queryInput = document.getElementById('query-input');
    this.priceFilter = document.getElementById('price-filter');
    this.ratingFilter = document.getElementById('rating-filter');
    this.openNowFilter = document.getElementById('open-now-filter');
    this.searchButton = document.getElementById('search-button');
    this.placeSearch = document.getElementById('place-search-list');
    this.gMap = document.querySelector('gmp-map');
    this.loadingSpinner = document.getElementById('loading-spinner');
    this.resultsHeaderText = document.getElementById('results-header-text');
    this.placeholderMessage = document.getElementById('placeholder-message');
    this.placeDetailsWidget = document.querySelector('gmp-place-details-compact');
    this.placeDetailsRequest = this.placeDetailsWidget.querySelector('gmp-place-details-place-request');
    this.searchRequest = this.placeSearch.querySelector('gmp-place-text-search-request');

    // Initialize instance variables
    this.map = null;
    this.geocoder = null;
    this.markers = {};
    this.detailsPopup = null;
    this.PriceLevel = null;
    this.isSearchInProgress = false;

    // Start the application
    this.init();
  }

  async init() {
    // Import libraries
    await google.maps.importLibrary("maps");
    const { Place, PriceLevel } = await google.maps.importLibrary("places");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { Geocoder } = await google.maps.importLibrary("geocoding");

    // Make classes available to the instance
    this.PriceLevel = PriceLevel;
    this.AdvancedMarkerElement = AdvancedMarkerElement;

    this.map = this.gMap.innerMap;
    this.geocoder = new Geocoder();

    // Call the new method to set up listeners
    this.attachEventListeners();
  }

  // NEW: Method to set up all event listeners
  attachEventListeners() {
    this.searchButton.addEventListener('click', this.performSearch.bind(this));
    // We will add the gmp-load listener in the next step
  }

  // NEW: Core search method
  async performSearch() {
    // Exit if a search is already in progress
    if (this.isSearchInProgress) {
      return;
    }
    // Set the lock
    this.isSearchInProgress = true;

    // Show the placeholder and spinner
    this.placeholderMessage.classList.add('hidden');
    this.placeSearch.classList.remove('hidden');
    this.showLoading(true);

    // Force a state change by clearing the query first.
    this.searchRequest.textQuery = null;

    // Defer setting the real properties to the next event loop cycle.
    setTimeout(async () => {
      const rawQuery = this.queryInput.value.trim();
      // If the query is empty, release the lock and hide the spinner
      if (!rawQuery) {
          this.showLoading(false);
          this.isSearchInProgress = false;
          return;
      };

      // For now, we just set the textQuery. We'll add filters later.
      this.searchRequest.textQuery = rawQuery;
      this.searchRequest.locationRestriction = this.map.getBounds();
    }, 0);
  }

  // NEW: Helper method to show/hide the spinner
  showLoading(visible) {
    this.loadingSpinner.classList.toggle('visible', visible);
  }
}

// Wait for the DOM to be ready, then create an instance of our app.
window.addEventListener('DOMContentLoaded', () => {
  new PlaceFinderApp();
});

檢查作業

儲存 script.js 檔案，然後重新整理瀏覽器中的 index.html。頁面應與先前相同。接著點選標題中的「搜尋」按鈕。

您應該會看到以下兩種情況：

「搜尋結果會顯示在這裡」的預留位置訊息會消失。
載入旋轉圖示會出現並持續旋轉。

由於我們尚未告知微調器何時停止，因此微調器會持續旋轉。我們會在下一節顯示結果時執行這項操作。這會確認搜尋功能是否正確觸發。

5. 顯示結果並新增標記

搜尋觸發程序現在可以正常運作，下一個工作是在畫面上顯示結果。本節中的程式碼會將搜尋邏輯連結至 UI。地點搜尋元素完成載入資料後，就會釋放搜尋「鎖定」、隱藏載入微調器，並在地圖上顯示每個結果的標記。

聆聽搜尋完成訊息

「地點搜尋元素」成功擷取資料時，會觸發 gmp-load 事件。這是我們處理結果的絕佳信號。

首先，請在 attachEventListeners 方法中為這個事件新增事件監聽器。

建立標記處理方法

接下來，我們要建立兩個新的輔助方法：clearMarkers 和 addMarkers。

clearMarkers() 會移除先前搜尋中的所有標記。
addMarkers() 會由我們的 gmp-load 監聽器呼叫。這個函式會逐一處理搜尋傳回的地點清單，並為每個地點建立新的 AdvancedMarkerElement。我們也會在這裡隱藏載入微調器，並釋放 isSearchInProgress 鎖定，完成搜尋週期。

請注意，我們使用地點 ID 做為鍵，將標記儲存在物件 (this.markers) 中。這是管理標記的方式，可讓我們日後找到特定標記。

最後，我們需要在每次新搜尋開始時呼叫 clearMarkers()。最適合放置這個檔案的位置是 performSearch 內。

更新 JavaScript 檔案

使用新方法更新 script.js 檔案，並變更 attachEventListeners 和 performSearch。

// script.js
class PlaceFinderApp {
  constructor() {
    // Get all DOM element references
    this.queryInput = document.getElementById('query-input');
    this.priceFilter = document.getElementById('price-filter');
    this.ratingFilter = document.getElementById('rating-filter');
    this.openNowFilter = document.getElementById('open-now-filter');
    this.searchButton = document.getElementById('search-button');
    this.placeSearch = document.getElementById('place-search-list');
    this.gMap = document.querySelector('gmp-map');
    this.loadingSpinner = document.getElementById('loading-spinner');
    this.resultsHeaderText = document.getElementById('results-header-text');
    this.placeholderMessage = document.getElementById('placeholder-message');
    this.placeDetailsWidget = document.querySelector('gmp-place-details-compact');
    this.placeDetailsRequest = this.placeDetailsWidget.querySelector('gmp-place-details-place-request');
    this.searchRequest = this.placeSearch.querySelector('gmp-place-text-search-request');

    // Initialize instance variables
    this.map = null;
    this.geocoder = null;
    this.markers = {};
    this.detailsPopup = null;
    this.PriceLevel = null;
    this.isSearchInProgress = false;

    // Start the application
    this.init();
  }

  async init() {
    // Import libraries
    await google.maps.importLibrary("maps");
    const { Place, PriceLevel } = await google.maps.importLibrary("places");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { Geocoder } = await google.maps.importLibrary("geocoding");

    // Make classes available to the instance
    this.PriceLevel = PriceLevel;
    this.AdvancedMarkerElement = AdvancedMarkerElement;

    this.map = this.gMap.innerMap;
    this.geocoder = new Geocoder();

    this.attachEventListeners();
  }

  attachEventListeners() {
    this.searchButton.addEventListener('click', this.performSearch.bind(this));
    // NEW: Listen for when the search component has loaded results
    this.placeSearch.addEventListener('gmp-load', this.addMarkers.bind(this));
  }

  // NEW: Method to clear markers from a previous search
  clearMarkers() {
    for (const marker of Object.values(this.markers)) {
      marker.map = null;
    }
    this.markers = {};
  }

  // NEW: Method to add markers for new search results
  addMarkers() {
    // Release the lock and hide the spinner
    this.isSearchInProgress = false;
    this.showLoading(false);

    const places = this.placeSearch.places;
    if (!places || places.length === 0) return;

    // Create a new marker for each place result
    for (const place of places) {
      if (!place.location || !place.id) continue;
      const marker = new this.AdvancedMarkerElement({
        map: this.map,
        position: place.location,
        title: place.displayName,
      });
      // Store marker by its place ID for access later
      this.markers[place.id] = marker;
    }
  }

  async performSearch() {
    if (this.isSearchInProgress) {
      return;
    }
    this.isSearchInProgress = true;
    this.placeholderMessage.classList.add('hidden');
    this.placeSearch.classList.remove('hidden');
    this.showLoading(true);

    // NEW: Clear old markers before starting a new search
    this.clearMarkers();

    this.searchRequest.textQuery = null;

    setTimeout(async () => {
      const rawQuery = this.queryInput.value.trim();
      if (!rawQuery) {
          this.showLoading(false);
          this.isSearchInProgress = false;
          return;
      };

      this.searchRequest.textQuery = rawQuery;
      this.searchRequest.locationRestriction = this.map.getBounds();
    }, 0);
  }

  showLoading(visible) {
    this.loadingSpinner.classList.toggle('visible', visible);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  new PlaceFinderApp();
});

檢查作業

儲存檔案，然後重新整理瀏覽器中的頁面。按一下 [搜尋] 按鈕。

載入旋轉圖示現在應該會顯示片刻，然後消失。側欄會列出與搜尋字詞相關的地點，地圖上也會顯示相應的標記。目前點選標記不會執行任何動作，我們會在下一節中新增互動功能。

6. 啟用搜尋篩選器和清單互動功能

我們的應用程式現在可以顯示搜尋結果，但還無法互動。在本節中，我們將讓所有使用者控制項運作。我們會啟用篩選器、啟用使用「Enter」鍵搜尋的功能，並將結果清單中的項目連結至地圖上的相應位置。

完成這個步驟後，應用程式就能充分回應使用者輸入內容。

首先，系統會更新 performSearch 方法，從標題中的所有篩選器控制項讀取值。針對每個篩選條件 (價格、評分和「營業中」)，系統會在執行搜尋前，於 searchRequest 物件上設定對應的屬性。

為所有控制項新增事件監聽器

接著，我們要擴展 attachEventListeners 方法。我們會在每個篩選器控制項上新增 change 事件的監聽器，並在搜尋輸入內容上新增 keydown 監聽器，偵測使用者何時按下「Enter」鍵。所有這些新監聽器都會呼叫 performSearch 方法。

將結果清單連結至地圖

為提供流暢體驗，點選側欄結果清單中的項目時，地圖應會聚焦於該位置。

新方法 handleResultClick 會監聽 gmp-select 事件，當使用者點選項目時，地點搜尋元素會觸發該事件。這項函式會找出相關聯地點的位置，並平滑地將地圖平移至該位置。

如要讓這項功能正常運作，請確認 index.html 中 gmp-place-search 元件的 selectable 屬性存在。

<gmp-place-search id="place-search-list" class="hidden" selectable>
    <gmp-place-all-content></gmp-place-all-content>
    <gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>

更新 JavaScript 檔案

使用下列完整程式碼更新 script.js 檔案。這個版本包含新的 handleResultClick 方法，以及 attachEventListeners 和 performSearch 中的更新邏輯。

// script.js
class PlaceFinderApp {
  constructor() {
    // Get all DOM element references
    this.queryInput = document.getElementById('query-input');
    this.priceFilter = document.getElementById('price-filter');
    this.ratingFilter = document.getElementById('rating-filter');
    this.openNowFilter = document.getElementById('open-now-filter');
    this.searchButton = document.getElementById('search-button');
    this.placeSearch = document.getElementById('place-search-list');
    this.gMap = document.querySelector('gmp-map');
    this.loadingSpinner = document.getElementById('loading-spinner');
    this.resultsHeaderText = document.getElementById('results-header-text');
    this.placeholderMessage = document.getElementById('placeholder-message');
    this.placeDetailsWidget = document.querySelector('gmp-place-details-compact');
    this.placeDetailsRequest = this.placeDetailsWidget.querySelector('gmp-place-details-place-request');
    this.searchRequest = this.placeSearch.querySelector('gmp-place-text-search-request');

    // Initialize instance variables
    this.map = null;
    this.geocoder = null;
    this.markers = {};
    this.detailsPopup = null;
    this.PriceLevel = null;
    this.isSearchInProgress = false;

    // Start the application
    this.init();
  }

  async init() {
    // Import libraries
    await google.maps.importLibrary("maps");
    const { Place, PriceLevel } = await google.maps.importLibrary("places");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { Geocoder } = await google.maps.importLibrary("geocoding");

    // Make classes available to the instance
    this.PriceLevel = PriceLevel;
    this.AdvancedMarkerElement = AdvancedMarkerElement;

    this.map = this.gMap.innerMap;
    this.geocoder = new Geocoder();

    this.attachEventListeners();
  }

  // UPDATED: All event listeners are now attached
  attachEventListeners() {
    // Listen for the 'Enter' key press in the search input
    this.queryInput.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        event.preventDefault();
        this.performSearch();
      }
    });

    // Listen for a sidebar result click
    this.placeSearch.addEventListener('gmp-select', this.handleResultClick.bind(this));

    this.placeSearch.addEventListener('gmp-load', this.addMarkers.bind(this));
    this.searchButton.addEventListener('click', this.performSearch.bind(this));
    this.priceFilter.addEventListener('change', this.performSearch.bind(this));
    this.ratingFilter.addEventListener('change', this.performSearch.bind(this));
    this.openNowFilter.addEventListener('change', this.performSearch.bind(this));
  }

  clearMarkers() {
    for (const marker of Object.values(this.markers)) {
      marker.map = null;
    }
    this.markers = {};
  }

  addMarkers() {
    this.isSearchInProgress = false;
    this.showLoading(false);

    const places = this.placeSearch.places;
    if (!places || places.length === 0) return;

    for (const place of places) {
      if (!place.location || !place.id) continue;
      const marker = new this.AdvancedMarkerElement({
        map: this.map,
        position: place.location,
        title: place.displayName,
      });
      this.markers[place.id] = marker;
    }
  }

  // NEW: Function to handle clicks on the results list
  handleResultClick(event) {
    const place = event.place;
    if (!place || !place.location) return;
    // Pan the map to the selected place
    this.map.panTo(place.location);
  }

  // UPDATED: Search function now includes all filters
  async performSearch() {
    if (this.isSearchInProgress) {
      return;
    }
    this.isSearchInProgress = true;
    this.placeholderMessage.classList.add('hidden');
    this.placeSearch.classList.remove('hidden');
    this.showLoading(true);
    this.clearMarkers();

    this.searchRequest.textQuery = null;

    setTimeout(async () => {
      const rawQuery = this.queryInput.value.trim();
      if (!rawQuery) {
          this.showLoading(false);
          this.isSearchInProgress = false;
          return;
      };

      this.searchRequest.textQuery = rawQuery;
      this.searchRequest.locationRestriction = this.map.getBounds();

      // Add filter values to the request
      const selectedPrice = this.priceFilter.value;
      let priceLevels = [];
      switch (selectedPrice) {
        case "1": priceLevels = [this.PriceLevel.INEXPENSIVE]; break;
        case "2": priceLevels = [this.PriceLevel.MODERATE]; break;
        case "3": priceLevels = [this.PriceLevel.EXPENSIVE]; break;
        case "4": priceLevels = [this.PriceLevel.VERY_EXPENSIVE]; break;
        default: priceLevels = null; break;
      }
      this.searchRequest.priceLevels = priceLevels;

      const selectedRating = parseFloat(this.ratingFilter.value);
      this.searchRequest.minRating = selectedRating > 0 ? selectedRating : null;
      this.searchRequest.isOpenNow = this.openNowFilter.checked ? true : null;
    }, 0);
  }

  showLoading(visible) {
    this.loadingSpinner.classList.toggle('visible', visible);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  new PlaceFinderApp();
});

檢查作業

儲存 script.js 檔案並重新整理頁面。應用程式現在應該具備高度互動性。

請確認下列事項：

在搜尋框中按下「Enter」鍵即可搜尋。
變更任何篩選條件 (價格、評分、營業中) 都會觸發新的搜尋，並更新結果。
現在只要點選側欄結果清單中的項目，地圖就會平滑移動至該項目的位置。

在下一節中，我們將實作點選標記時顯示的詳細資料資訊卡。

7. 實作 Place Details 元素

我們的應用程式現在已可完全互動，但缺少一項重要功能：查看所選地點的詳細資訊。在本節中，我們將實作「地點詳細資料」元素，當使用者點選地圖上的標記，或選取「地點搜尋」元素中的項目時，就會顯示該元素。

建立可重複使用的詳細資料資訊卡容器

在地圖上顯示地點詳細資料最有效率的方式，就是建立單一可重複使用的容器。我們會使用 AdvancedMarkerElement 做為這個容器。其內容將是 index.html 中已有的隱藏 gmp-place-details-compact 小工具。

新的 initDetailsPopup 方法會處理這個可重複使用的標記建立作業。應用程式載入時會建立一次，且一開始會隱藏。我們也會在這個方法中將接聽程式新增至主地圖，這樣一來，點選地圖上的任何位置都會隱藏詳細資料資訊卡。

更新標記點擊行為

接著，我們需要更新使用者點按地點標記時的動作。現在，addMarkers 方法內的 'click' 監聽器會負責顯示詳細資料資訊卡。

點選標記時，接聽器會執行下列動作：

將地圖平移至標記位置。
更新詳細資料資訊卡，加入該特定地點的資訊。
將詳細資料資訊卡放在標記的位置，並設為顯示狀態。

將清單點擊次數連結至標記點擊次數

最後，我們要更新 handleResultClick 方法。現在系統會以程式輔助方式，在相應的標記上觸發 click 事件，而不是只平移地圖。這項強大的模式可讓我們重複使用這兩種互動的相同邏輯，讓程式碼保持簡潔且易於維護。

更新 JavaScript 檔案

使用下列程式碼更新 script.js 檔案。新增或變更的章節包括 initDetailsPopup 方法，以及更新後的 addMarkers 和 handleResultClick 方法。

// script.js
class PlaceFinderApp {
  constructor() {
    // Get all DOM element references
    this.queryInput = document.getElementById('query-input');
    this.priceFilter = document.getElementById('price-filter');
    this.ratingFilter = document.getElementById('rating-filter');
    this.openNowFilter = document.getElementById('open-now-filter');
    this.searchButton = document.getElementById('search-button');
    this.placeSearch = document.getElementById('place-search-list');
    this.gMap = document.querySelector('gmp-map');
    this.loadingSpinner = document.getElementById('loading-spinner');
    this.resultsHeaderText = document.getElementById('results-header-text');
    this.placeholderMessage = document.getElementById('placeholder-message');
    this.placeDetailsWidget = document.querySelector('gmp-place-details-compact');
    this.placeDetailsRequest = this.placeDetailsWidget.querySelector('gmp-place-details-place-request');
    this.searchRequest = this.placeSearch.querySelector('gmp-place-text-search-request');

    // Initialize instance variables
    this.map = null;
    this.geocoder = null;
    this.markers = {};
    this.detailsPopup = null;
    this.PriceLevel = null;
    this.isSearchInProgress = false;

    // Start the application
    this.init();
  }

  async init() {
    // Import libraries
    await google.maps.importLibrary("maps");
    const { Place, PriceLevel } = await google.maps.importLibrary("places");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { Geocoder } = await google.maps.importLibrary("geocoding");

    // Make classes available to the instance
    this.PriceLevel = PriceLevel;
    this.AdvancedMarkerElement = AdvancedMarkerElement;

    this.map = this.gMap.innerMap;
    this.geocoder = new Geocoder();

    // NEW: Call the method to initialize the details card
    this.initDetailsPopup();
    this.attachEventListeners();
  }

  attachEventListeners() {
    this.queryInput.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        event.preventDefault();
        this.performSearch();
      }
    });
    this.placeSearch.addEventListener('gmp-select', this.handleResultClick.bind(this));
    this.placeSearch.addEventListener('gmp-load', this.addMarkers.bind(this));
    this.searchButton.addEventListener('click', this.performSearch.bind(this));
    this.priceFilter.addEventListener('change', this.performSearch.bind(this));
    this.ratingFilter.addEventListener('change', this.performSearch.bind(this));
    this.openNowFilter.addEventListener('change', this.performSearch.bind(this));
  }

  // NEW: Method to set up the reusable details card
  initDetailsPopup() {
    this.detailsPopup = new this.AdvancedMarkerElement({
      content: this.placeDetailsWidget,
      map: null,
      zIndex: 100
    });
    this.map.addListener('click', () => { this.detailsPopup.map = null; });
  }

  clearMarkers() {
    for (const marker of Object.values(this.markers)) {
      marker.map = null;
    }
    this.markers = {};
  }

  // UPDATED: The marker's click listener now shows the details card
  addMarkers() {
    this.isSearchInProgress = false;
    this.showLoading(false);

    const places = this.placeSearch.places;
    if (!places || places.length === 0) return;

    for (const place of places) {
      if (!place.location || !place.id) continue;
      const marker = new this.AdvancedMarkerElement({
        map: this.map,
        position: place.location,
        title: place.displayName,
      });
      // Add the click listener to show the details card
      marker.addListener('click', (event) => {
        event.stop();
        this.map.panTo(place.location);
        this.placeDetailsRequest.place = place;
        this.placeDetailsWidget.style.display = 'block';
        this.detailsPopup.position = place.location;
        this.detailsPopup.map = this.map;
      });
      this.markers[place.id] = marker;
    }
  }

  // UPDATED: This now triggers the marker's click event
  handleResultClick(event) {
    const place = event.place;
    if (!place || !place.id) return;
    const marker = this.markers[place.id];
    if (marker) {
      // Programmatically trigger the marker's click event
      marker.click();
    }
  }

  async performSearch() {
    if (this.isSearchInProgress) return;
    this.isSearchInProgress = true;
    this.placeholderMessage.classList.add('hidden');
    this.placeSearch.classList.remove('hidden');
    this.showLoading(true);
    this.clearMarkers();
    // Hide the details card when a new search starts
    if (this.detailsPopup) this.detailsPopup.map = null;

    this.searchRequest.textQuery = null;

    setTimeout(async () => {
      const rawQuery = this.queryInput.value.trim();
      if (!rawQuery) {
          this.showLoading(false);
          this.isSearchInProgress = false;
          return;
      };

      this.searchRequest.textQuery = rawQuery;
      this.searchRequest.locationRestriction = this.map.getBounds();

      const selectedPrice = this.priceFilter.value;
      let priceLevels = [];
      switch (selectedPrice) {
        case "1": priceLevels = [this.PriceLevel.INEXPENSIVE]; break;
        case "2": priceLevels = [this.PriceLevel.MODERATE]; break;
        case "3": priceLevels = [this.PriceLevel.EXPENSIVE]; break;
        case "4": priceLevels = [this.PriceLevel.VERY_EXPENSIVE]; break;
        default: priceLevels = null; break;
      }
      this.searchRequest.priceLevels = priceLevels;

      const selectedRating = parseFloat(this.ratingFilter.value);
      this.searchRequest.minRating = selectedRating > 0 ? selectedRating : null;
      this.searchRequest.isOpenNow = this.openNowFilter.checked ? true : null;
    }, 0);
  }

  showLoading(visible) {
    this.loadingSpinner.classList.toggle('visible', visible);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  new PlaceFinderApp();
});

檢查作業

儲存 script.js 檔案並重新整理頁面。應用程式現在應該會顯示隨選詳細資料。

請確認下列事項：

現在點選地圖上的標記，地圖就會以該標記為中心，並在標記上方開啟樣式化的詳細資料資訊卡。
點選側欄結果清單中的項目，也會有相同效果。
點選資訊卡以外的地圖區域，即可關閉資訊卡。
開始新的搜尋時，系統也會關閉所有開啟的詳細資料資訊卡。

8. 最後潤飾

我們的應用程式現在已可正常運作，但我們還可以進行一些最後的潤飾，讓使用者體驗更加優質。在最後這個部分，我們將實作兩項重要功能：提供更完善搜尋結果脈絡的動態標題，以及自動格式化使用者的搜尋查詢。

建立動態結果標題

目前側欄標題一律顯示「結果」。我們可以更新這項資訊，反映目前的搜尋結果，讓資訊更豐富。例如「紐約附近的漢堡店」。

為此，我們將使用 Geocoding API，將地圖的中心座標轉換為清楚易懂的地點，例如城市名稱。新的 async 方法 updateResultsHeader 會處理這項邏輯。每次執行搜尋時，系統都會呼叫這個函式。

格式化使用者的搜尋查詢

為確保使用者介面看起來乾淨一致，我們會自動將使用者的搜尋字詞格式化為「Title Case」(例如「「burger restaurant」會變成「Burger Restaurant」。輔助函式 toTitleCase 會處理這項轉換作業。performSearch 方法會更新為在執行搜尋及更新標頭前，先對使用者輸入內容使用這個函式。

更新 JavaScript 檔案

使用最終版本的程式碼更新 script.js 檔案。包括新的 toTitleCase 和 updateResultsHeader 方法，以及整合這些方法的更新版 performSearch 方法。

// script.js
class PlaceFinderApp {
  constructor() {
    // Get all DOM element references
    this.queryInput = document.getElementById('query-input');
    this.priceFilter = document.getElementById('price-filter');
    this.ratingFilter = document.getElementById('rating-filter');
    this.openNowFilter = document.getElementById('open-now-filter');
    this.searchButton = document.getElementById('search-button');
    this.placeSearch = document.getElementById('place-search-list');
    this.gMap = document.querySelector('gmp-map');
    this.loadingSpinner = document.getElementById('loading-spinner');
    this.resultsHeaderText = document.getElementById('results-header-text');
    this.placeholderMessage = document.getElementById('placeholder-message');
    this.placeDetailsWidget = document.querySelector('gmp-place-details-compact');
    this.placeDetailsRequest = this.placeDetailsWidget.querySelector('gmp-place-details-place-request');
    this.searchRequest = this.placeSearch.querySelector('gmp-place-text-search-request');

    // Initialize instance variables
    this.map = null;
    this.geocoder = null;
    this.markers = {};
    this.detailsPopup = null;
    this.PriceLevel = null;
    this.isSearchInProgress = false;

    // Start the application
    this.init();
  }

  async init() {
    // Import libraries
    await google.maps.importLibrary("maps");
    const { Place, PriceLevel } = await google.maps.importLibrary("places");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const { Geocoder } = await google.maps.importLibrary("geocoding");

    // Make classes available to the instance
    this.PriceLevel = PriceLevel;
    this.AdvancedMarkerElement = AdvancedMarkerElement;

    this.map = this.gMap.innerMap;
    this.geocoder = new Geocoder();

    this.initDetailsPopup();
    this.attachEventListeners();
  }

  attachEventListeners() {
    this.queryInput.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        event.preventDefault();
        this.performSearch();
      }
    });
    this.placeSearch.addEventListener('gmp-select', this.handleResultClick.bind(this));
    this.placeSearch.addEventListener('gmp-load', this.addMarkers.bind(this));
    this.searchButton.addEventListener('click', this.performSearch.bind(this));
    this.priceFilter.addEventListener('change', this.performSearch.bind(this));
    this.ratingFilter.addEventListener('change', this.performSearch.bind(this));
    this.openNowFilter.addEventListener('change', this.performSearch.bind(this));
  }

  initDetailsPopup() {
    this.detailsPopup = new this.AdvancedMarkerElement({
      content: this.placeDetailsWidget,
      map: null,
      zIndex: 100
    });
    this.map.addListener('click', () => { this.detailsPopup.map = null; });
  }

  // NEW: Helper function to format text to Title Case
  toTitleCase(str) {
    if (!str) return '';
    return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
  }

  showLoading(visible) {
    this.loadingSpinner.classList.toggle('visible', visible);
  }

  clearMarkers() {
    for (const marker of Object.values(this.markers)) { marker.map = null; }
    this.markers = {};
  }

  addMarkers() {
    this.isSearchInProgress = false;
    this.showLoading(false);

    const places = this.placeSearch.places;
    if (!places || places.length === 0) return;

    for (const place of places) {
      if (!place.location || !place.id) continue;
      const marker = new this.AdvancedMarkerElement({
        map: this.map,
        position: place.location,
        title: place.displayName,
      });
      marker.addListener('click', (event) => {
        event.stop();
        this.map.panTo(place.location);
        this.placeDetailsRequest.place = place;
        this.placeDetailsWidget.style.display = 'block';
        this.detailsPopup.position = place.location;
        this.detailsPopup.map = this.map;
      });
      this.markers[place.id] = marker;
    }
  }

  handleResultClick(event) {
    const place = event.place;
    if (!place || !place.id) return;
    const marker = this.markers[place.id];
    if (marker) {
      marker.click();
    }
  }

  // UPDATED: Now integrates formatting and the dynamic header
  async performSearch() {
    if (this.isSearchInProgress) return;
    this.isSearchInProgress = true;
    this.placeholderMessage.classList.add('hidden');
    this.placeSearch.classList.remove('hidden');
    this.showLoading(true);
    this.clearMarkers();
    if (this.detailsPopup) this.detailsPopup.map = null;

    this.searchRequest.textQuery = null;

    setTimeout(async () => {
      const rawQuery = this.queryInput.value.trim();
      if (!rawQuery) {
          this.showLoading(false);
          this.isSearchInProgress = false;
          return;
      };

      // Format the query and update the input box value
      const formattedQuery = this.toTitleCase(rawQuery);
      this.queryInput.value = formattedQuery;

      // Update the header with the new query and location
      await this.updateResultsHeader(formattedQuery);

      // Pass the formatted query to the search request
      this.searchRequest.textQuery = formattedQuery;
      this.searchRequest.locationRestriction = this.map.getBounds();

      const selectedPrice = this.priceFilter.value;
      let priceLevels = [];
      switch (selectedPrice) {
        case "1": priceLevels = [this.PriceLevel.INEXPENSIVE]; break;
        case "2": priceLevels = [this.PriceLevel.MODERATE]; break;
        case "3": priceLevels = [this.PriceLevel.EXPENSIVE]; break;
        case "4": priceLevels = [this.PriceLevel.VERY_EXPENSIVE]; break;
        default: priceLevels = null; break;
      }
      this.searchRequest.priceLevels = priceLevels;

      const selectedRating = parseFloat(this.ratingFilter.value);
      this.searchRequest.minRating = selectedRating > 0 ? selectedRating : null;
      this.searchRequest.isOpenNow = this.openNowFilter.checked ? true : null;
    }, 0);
  }

  // NEW: Method to update the sidebar header with geocoded location
  async updateResultsHeader(query) {
    try {
      const response = await this.geocoder.geocode({ location: this.map.getCenter() });
      if (response.results && response.results.length > 0) {
        const cityResult = response.results.find(r => r.types.includes('locality')) || response.results[0];
        const city = cityResult.address_components[0].long_name;
        this.resultsHeaderText.textContent = `${query} near ${city}`;
      } else {
        this.resultsHeaderText.textContent = `${query} near current map area`;
      }
    } catch (error) {
      console.error("Geocoding failed:", error);
      this.resultsHeaderText.textContent = `Results for ${query}`;
    }
  }
}

window.addEventListener('DOMContentLoaded', () => {
  new PlaceFinderApp();
});

檢查作業

儲存 script.js 檔案並重新整理頁面。

驗證功能：

在搜尋框中輸入 pizza (全小寫)，然後按一下「搜尋」。方塊中的文字應會變更為「Pizza」，側欄中的標題應會更新為「New York 附近的 Pizza」。
將地圖平移至其他城市 (例如波士頓)，然後再次搜尋。標題應會更新為「波士頓附近的披薩店」。

9. 恭喜

您已成功建構完整的互動式在地搜尋應用程式，結合了 Places UI Kit 的簡便性與核心 Google 地圖平台 JavaScript API 的強大功能。

您學到的內容

如何使用 JavaScript 類別管理狀態和邏輯，建構對應應用程式。
如何搭配 Google Maps JavaScript API 使用 Places UI Kit，快速開發 UI。
如何以程式輔助方式新增及管理進階標記，在地圖上顯示自訂搜尋點。
如何使用 Geocoding Service 將座標轉換為人類可讀的地址，提升使用者體驗。
瞭解如何使用狀態標記，找出並修正互動式應用程式中的常見競爭條件，確保元件屬性正確更新。

後續步驟

進一步瞭解如何自訂進階標記，包括變更顏色、比例，甚至是使用自訂 HTML。
探索雲端式地圖樣式設定，自訂地圖的外觀與風格，打造符合品牌形象的地圖。
請嘗試新增繪圖程式庫，讓使用者在地圖上繪製形狀，定義搜尋區域。
請填寫下列問卷調查，協助我們製作最實用的內容：

你還想看到哪些程式碼研究室？

在地圖上以視覺化方式呈現資料

進一步瞭解如何自訂地圖樣式

在地圖中建構 3D 互動

找不到最感興趣的程式碼研究室嗎？請在這裡提出新的問題。

使用 Places UI Kit 建構在地搜尋應用程式 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 事前準備

必要條件

學習內容

軟硬體需求

2. 做好準備

設定 Google 地圖平台

3. 應用程式殼層和功能地圖

建立 HTML 檔案

建立 CSS 檔案

建立 JavaScript 應用程式類別

API 金鑰限制

檢查作業

4. 實作搜尋函式

建立搜尋方法

新增事件接聽程式

更新 JavaScript 檔案

檢查作業

5. 顯示結果並新增標記

聆聽搜尋完成訊息

建立標記處理方法

更新 JavaScript 檔案

檢查作業

6. 啟用搜尋篩選器和清單互動功能

啟用搜尋篩選器

為所有控制項新增事件監聽器

將結果清單連結至地圖

更新 JavaScript 檔案

檢查作業

7. 實作 Place Details 元素

建立可重複使用的詳細資料資訊卡容器

更新標記點擊行為

將清單點擊次數連結至標記點擊次數

更新 JavaScript 檔案

檢查作業

8. 最後潤飾

建立動態結果標題

格式化使用者的搜尋查詢

更新 JavaScript 檔案

檢查作業

9. 恭喜

您學到的內容

後續步驟

你還想看到哪些程式碼研究室？

使用 Places UI Kit 建構在地搜尋應用程式