Google Maps Platform 可讓客戶使用進階標記自訂地圖標記的視覺設計，打造獨特體驗。本文將探討客戶如何更進一步，建立根據即時資料動態變更的標記。
地圖標記是實用工具，可為使用者提供豐富的地圖體驗。標記屬性 (例如大小、顏色和形狀) 可傳達每個標記位置的其他資訊。在某些情況下，這類額外資訊可能會動態變更，開發人員可能希望地圖視覺化內容隨之更新，讓使用者保有新鮮感。
本文將以零售連鎖店為例，說明如何使用地圖向使用者顯示商店等待時間。不過，這個架構也適用於許多其他用途。以下列舉幾種：
- 飯店空房資訊：在地圖上顯示飯店搜尋結果時，空房資訊的即時性是一項重要信號，可鼓勵使用者在空房減少時預訂飯店。
- 停車位供應情形：在地圖上顯示停車場，讓使用者放心選擇抵達時有車位的目的地。
- 營業中、即將打烊和已打烊的餐廳：在地圖上顯示餐廳搜尋結果時，使用者必須知道餐廳是否可能在他們抵達時已打烊。
動態進階標記解決方案
您可以使用進階標記建立地圖，以視覺化方式呈現動態資料。如前所述，這個用途是連鎖零售商店利用結帳排隊管理系統，預估及視覺化呈現使用者的等待時間。應用程式架構如下：
步驟 1：決定要定義視覺體驗的屬性
第一步是決定要向使用者顯示的一或多個地點屬性。在本例中，我們只想顯示一項屬性：各商店位置目前的等待時間 (以分鐘為單位)。
下一步是選取一或多個對應的標記屬性，在地圖標記上以視覺方式標註等待時間。PinElement 規格中提供現成的標記屬性清單。您也可以使用自訂 HTML，取得更多豐富的自訂選項。
在本範例中，我們將使用兩個標記屬性，以視覺化方式呈現等待時間資料：
- 標記顏色：藍色代表等待時間少於 5 分鐘，黃色代表超過 5 分鐘
- 標記內容 (需要自訂 HTML 標記)：我們會在標記中加入目前的等待時間 (以分鐘為單位)
步驟 2：設定與即時資料來源的連線
連結資料來源的方式有很多種，合適的解決方案取決於您的用途和技術基礎架構。在本例中，我們使用提取方法，定期透過 HTTP 要求 (REST) 要求更新的等待時間資料。在下列各節中，您將看到採用推送方法的替代架構。
為了讓應用程式能存取伺服器的等待時間資料，我們的架構採用 Cloud Functions for Firebase。Cloud Functions 可讓我們定義後端函式，以便存取及運算這項資料。我們也會在網頁應用程式中加入 Firebase 程式庫，以便使用 HTTP 要求存取 Cloud 函式。
下一步是確保使用者能看到最新資料。為此，我們使用 JavaScript setInterval 函式設定計時器，並將逾時時間設為 30 秒。每次觸發計時器時，我們都會按照上述方式要求更新等待時間資料。取得新資料後，我們必須重新整理地圖標記的外觀。下一步將詳細說明如何進行這些變更。
步驟 3：算繪地圖標記
現在，我們可以使用進階標記，在地圖上算繪樣式化標記。進階標記可在 Google Maps Platform 的 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 雲端通訊和 Websockets。無論選擇哪種方法，請務必考量下列因素，確保地圖工具維持高效能：
- 更新頻率
- 資料量
- 地圖檢視中的標記數量
- 硬體和瀏覽器功能
Firebase 雲端通訊
Firebase 雲端通訊是推送方法。採用這種做法時，每當後端更新等待時間資料，系統就會將更新傳送至地圖應用程式。更新訊息會觸發回呼函式，用於更新標記外觀和內容。
選取這個架構前，請務必考量到，每個執行地圖應用程式的瀏覽器都必須維持永久伺服器連線。因此，執行成本可能較高，且在連線能力問題方面可能較不穩定。
WebSocket
WebSockets 是另一種以推送為基礎的方法，可確保資料保持最新狀態。與前一個情境類似，您可以使用 WebSocket 在後端和地圖應用程式之間建立永久連線。這種做法的功能優勢與 Firebase 雲端通訊類似，但可能需要額外設定必要的基礎架構。
結論
開發人員可以結合即時資料來源與進階標記，在 Google 地圖上建構直覺式的視覺化內容。視地圖需求、使用者硬體和瀏覽器，以及資料量而定，您可以透過多種方式連結這些資料來源。接著，您可以使用整合資料即時控制進階標記的外觀和風格，為使用者提供動態體驗。
後續行動
延伸閱讀：
貢獻者
主要作者：
Jim Leflar | Google Maps Platform 解決方案工程師
John Branigan | Google Cloud Platform 資深客戶工程師
Steve Barrett | Google Maps Platform 解決方案工程師