在 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 雲端通訊是推送方法，這樣一來，每當後端更新資料時，您就會向地圖應用程式傳送更新。更新訊息會觸發回呼函式，該函式的用途是更新標記的外觀和內容。
選擇這種架構之前要考慮一點，就是需要的每個執行地圖應用程式的瀏覽器，都維持固定的伺服器連線。因此，執行成本可能較高，在連線問題方面則可能較不可靠。
WebSockets
WebSockets 是另一種以推送為基礎的方法，可更新資料。與上述情況類似，您可以使用 WebSocket 在後端和地圖應用程式之間建立永久連線。此方法的功能優點與 Firebase 雲端通訊本質類似，但可能需要執行其他工作來設定必要的基礎架構。
結論
開發人員可以將即時資料來源與進階標記結合，在 Google 地圖上打造直覺化的視覺化效果。視地圖需求、使用者硬體和瀏覽器和資料量而定，連結這些資料來源的方式有很多種。接著，整合後的資料即可即時控制進階標記的外觀和風格，讓使用者享有動態化體驗。
下一步
延伸閱讀：
貢獻者
主體作者：
Jim Leflar | Google 地圖平台解決方案工程師
John Branigan | Google Cloud Platform 資深客戶工程師
Steve Barrett | Google 地圖平台解決方案工程師