Google 地圖平台可讓客戶使用進階標記自訂地圖標記的視覺設計，打造獨一無二的使用體驗。在本文件中，我們將探討客戶如何更進一步，建立可根據即時資料動態變更的標記。
地圖標記是實用工具，可為使用者提供豐富的地圖體驗。大小、顏色和形狀等標記屬性可傳送每個標示位置的其他相關資訊。在某些情況下，這類額外資訊可能會動態變更，開發人員可能會希望地圖視覺化資訊更新，以便為使用者提供最新資訊。
在本文中，我們將使用範例進行說明：某家零售連鎖店想透過地圖向使用者顯示商店等待時間。不過，這個架構也適用於許多其他用途。以下提供幾個額外的建議：
- 飯店空房資訊：空房率是飯店搜尋結果的地圖，可善用空房率這項重要信號，可吸引使用者預訂飯店，因為空房日漸減少。
- 停車位供應情形：在停車場地圖上，提供使用者確定目的地的位置，方便他們選擇前往停車場的停車場。
- 餐廳營業中、即將打烊和已關門：在顯示餐廳搜尋結果的地圖上，使用者必須知道餐廳是否在抵達時已關門。
動態進階標記解決方案
接下來，我們將逐步說明如何使用進階標記建立地圖，以便呈現動態資料。如先前所述，這個用途是指零售連鎖店利用結帳隊伍管理系統，為使用者估算及顯示等候時間。應用程式架構如下：
步驟 1：決定屬性以定義視覺體驗
第一步是決定要向使用者顯示一或多個地點資源。在本例中，我們只想顯示一項房源，也就是各商店地點目前的等待時間，以分鐘為單位。
接下來，請選取一或多個對應的標記屬性，在地圖標記上視覺標示等候時間。您可以在 PinElement 規格中，直接使用標記屬性清單。您也可以使用自訂 HTML 取得更多自訂選項。
在本例中，我們會使用兩個標記屬性來呈現等候時間資料：
- 標記顏色：等待時間不到 5 分鐘，以藍色表示等待時間超過 5 分鐘，並以藍色標記
- 標記內容 (需要自訂 HTML 標記)：我們會在標記中加入目前的等待時間 (分鐘)
步驟 2 - 設定與即時資料來源的連線
您可以透過多種方式連線至資料來源，而適合的解決方案則取決於您的用途和技術基礎架構。在本例中，我們使用的是提取方式，也就是定期透過 HTTP 要求 (REST) 要求更新的等候時間資料。在後續章節中，您將看到利用推送方法的其他架構。
為了讓應用程式能夠存取伺服器的等候時間資料，我們的架構會利用 Cloud Functions for Firebase。我們可以使用 Cloud Functions 定義後端函式，用來存取及計算這類資料。我們也會在網頁應用程式中加入 Firebase 程式庫，以便透過 HTTP 要求存取 Cloud 函式。
下一個步驟是確保我們為使用者提供最新資料。為此，我們使用 JavaScript setInterval 函式設定計時器，並設定 30 秒的逾時時間。每次觸發計時器時，我們會要求更新的等待時間資料，如上所述。取得新資料後，我們必須重新整理地圖標記的外觀。下一個步驟將詳細說明如何進行這些變更。
步驟 3 - 算繪地圖標記
我們現在可以使用進階標記，在地圖上算繪樣式化標記。您可以使用 Google 地圖平台的 Maps JavaScript API 建立地圖，並在其中顯示進階標記。使用進階標記時，請務必在 JS 地圖要求中加入 地圖 ID 參數。
在下方程式碼片段中，我們會建立標記，並透過建立 HTML div 元素來定義標記的內容：
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
最後一個步驟是更新每個商店的標記文字和 CSS 樣式。以下程式碼會讀取更新的等候時間資料，並根據等候時間為每個商店圖釘指派樣式：
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
地圖現在會使用現有的等候時間 API，為使用者呈現最新的等候時間：
連結即時資料來源的替代方式
您可以透過多種方式連結即時資料來源。以下我們將介紹 Firebase 雲端通訊和 Websocket 這兩個替代選項。無論您選擇哪種方法，請務必考量下列因素，確保地圖工具持續發揮效能：
- 更新頻率
- 資料量
- 地圖檢視畫面中的標記數量
- 硬體和瀏覽器功能
Firebase 雲端通訊
Firebase 雲端通訊是一種推送方式。採用這種做法後，每次在後端更新等候時間資料時，您就會向地圖應用程式傳送更新。更新訊息會觸發回呼函式，目的是更新標記的外觀和內容。
選擇這項架構前，請先考量到每個執行地圖應用程式的瀏覽器都需要維持持續的伺服器連線。因此，執行成本可能較高，且在連線問題方面可能較不穩定。
WebSocket
WebSockets 是另一種推送資料的一種推送式方法。與前述情境相同，您可以使用 WebSocket 在後端和地圖應用程式之間建立永久連線。這種做法帶來的功能優勢與 Firebase 雲端通訊類似，但可能需要額外設定必要的基礎架構。
結論
開發人員可以將即時資料來源與進階標記結合，在 Google 地圖上建立直覺性的視覺化資訊。您可以透過多種方式連結這些資料來源，具體取決於地圖需求、使用者的硬體和瀏覽器，以及資料量。整合後的資料可用於即時控制進階標記的外觀和風格，為使用者提供動態體驗。
後續行動
相關資源：
貢獻者
主要作者：
Jim Leflar | Google 地圖平台解決方案工程師
John Branigan | Google Cloud Platform 資深客戶工程師
Steve Barrett | Google 地圖平台解決方案工程師