當人們外出旅遊時，選擇去哪玩、住哪裡，通常會看附近是否有其他購物消費的地方以及遊玩觀光的景點；此外，若有買房或租屋需求，標的物件周遭的生活機能與交通學區條件是否充足完備，更是一大考量。
無論是有旅遊或買房需求的消費者，在搜尋該地點附近的地標多寡與分佈狀況時，經常需要在買屋平台、旅遊網站跟免費的 Google 地圖之間來回切換，並重複好幾遍相同的步驟，這樣的網路使用環境不論對網站平台的轉換率或消費者的使用體驗皆會造成負面影響。
Google Maps Platform 最新推出 Local Context (beta版) (參閱 blog連結1、blog連結2) 大大彌補了使用者在使用手機或電腦瀏覽網頁時，需同時查看旅遊網站又要使用 Google 地圖頁面所造成的需求落差。透過 Local Context (beta版) 的導入，您將大幅加速您的消費者完成訂購預約流程，並最小化放棄購物車比率、提升網站轉換率。
Google Maps 在您的網站中，提供消費者最熟悉的地圖介面
Local Context 可提供您的網站使用者 Google 地圖高達 99% 全球涵蓋率、2,500 萬每日更新次數、每月經 10 億人驗證的地點資訊，針對單一目標地點，除了可以瀏覽原本頁面中的動態地圖外，同時添加了周遭更完整、全面的地理位置訊息，包括消費者最關注的興趣點資訊 (Point of interest) 、路徑規劃與預估時間等；此外，當消費者點擊地圖上目標地點附近的 Marker 圖標或透過點擊 Place Chooser 插件提供的地標照片集中任一照片時，即可輕鬆瀏覽該地標詳細資訊與更多照片。透過 Local Context，使用者將與您的網站互動得更多、更深，並協助使用者更快、更容易進行預約、下單等流程。
簡單、全方位的地方探索體驗
Local Context 將地圖、路徑規劃、地點 (Maps, Routes, Places) 功能，透過一支 API 全部整合，一次提供 3 種功能，讓開發者可輕易導入使用。目前網站頁面有使用動態地圖的部分即可直接導入使用，若有其他地圖樣式或其他 API 功能，均不受影響；平均而言，開發人員只需幾天、透過添加幾行程式碼，就可啟用導入這樣完整的功能體驗。
一般載入動態地圖的程式碼範例如下（尚未納入Local Context）：
const myCoordinates = {lat: -41.2847, lng: 174.7681};
const map = new google.maps.Map(
document.querySelector(‘#map-container’),
center: myCoordinates,
zoom: 16
);
採用Local Context地圖的程式碼範例如下：
const myCoordinates = {lat: -41.2847, lng: 174.7681};
const lcMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector(‘#map-container’),
placeTypePreferences: [
‘bakery’, ‘cafe’, ‘clothing_store’, ‘drugstore’, ‘park’,
‘restaurant’, ‘shopping_mall’, ‘tourist_attraction’, ‘university’
],
maxPlaceCount: 24,
});
const map = lcMapView.map;
map.setOptions({
center: myCoordinates,
zoom: 16
});
此外，導入以上 Local Context 程式碼後，開發人員無須負擔後續任何的維護與更新，因為 GMP 工程團隊會在後端進行 Loacl Context 相關地標及程式部署維運更新。更多程式碼範例與開發文件，請參見文末連結。在價格部分，目前 Local Context 為 beta 版，為免費使用；預估正式版本價格將以 sesson 計費，會讓企業客戶更可清楚掌握其價格費用，因為所有 Local Context 所包含的豐富 Place 地標資訊、路徑規劃、地圖等功能，僅需使用一支 API，也僅須一支 API 呼叫的費用。
Google Maps 客製化以滿足您的企業與品牌需求
Local Context 可讓開發人員設定哪些地標類型是您的消費者會感興趣的 (類別最多 10 類)、以及每次載入的地標點數量 (最多 24 點)，甚至可設定地標權重來設定哪些類別地標權重大、出現數量比例高。
舉例來說，下圖為某飯店訂房網站，可選擇在每一飯店物件周圍，設定每次載入 12 個地標點，且類型為：餐廳、觀光景點、夜生活、購物商場等類型；此外， Place Chooser 地標照片集可顯示地標照片，位置可設定位於地圖下方、左側、或右側；而地圖樣式中地標 Marker、地圖物件 (道路、街廓、水系等)，也均可客製化設計樣式，以符企業網站品牌設計風格。
(關於 placeTypePreferences: type, weight; maxPlaceCount; place chooser 等各參數設定請參見 Setting Local Context and Map Options)
Google Maps 依使用者需求載入地標
網站開發者可搭配增加「探索周遭地標」或「瀏覽地方資訊」按鈕， 使用者點擊前，網站預設載入一般動態地圖，點擊後再載入地圖中的地標。故使用者可依自己需求決定，當自己在需要進行下單或訂購決策時，再點擊載入地標點以瀏覽地圖。
程式碼範例如下：
(參見開發文件 Postpone loading Local Context data)
// Initialize the map without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector(‘#map’),
placeTypePreferences: [‘park’, ‘restaurant’, ‘tourist_attraction’],
maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
});
//…
// Show places now.
localContextMapView.maxPlaceCount = 12;
Google Maps 隨著使用者與地圖互動、更新載入地標
當使用者已經將地圖平移到原本區域範圍外、拉遠或縮小、或移到一個新的相鄰區域時，Local Context 圖層可設計為讓使用者自行決定是否載入更新圖面上的地標，不會自動更新載入；故開發者可設計「更新附近地標」按鈕，讓使用者當瀏覽探索到新區域時，自行點擊按紐更新載入該區域的地標點。
程式碼範例如下：
(參見開發文件 Refreshing Search Properties)
// Refresh the search when the user clicks a button.
refreshButton.addEventListener(“click”, () => {
localContextMapView.search();
}
讓使用者自行勾選顯示哪些類型地標
某些情況下，使用者可能只想看到某些特定類型地標，例如，預訂飯店時，或許只關注周遭的觀光景點，開發人員可提供勾選地標的篩選器，讓使用者勾選當下只欲瀏覽的類別(ex.觀光景點)。這樣的 UI 客製化，提供使用者更大的彈性與自由，可自主選擇展示當下關注的地標類型。
(參見 Demo網站範例)
Local Context beta 版 目前免費試用中
Local Context 列於 Maps JavaScript API library 中，beta 版期間提供所有企業客戶免費試用。請參閱 開發文件 提供您完整的的開發參數與程式語法說明；此外，Local Context 在原生 Android 及 iOS SDK 開發元件中，也已進入內部測試期即將開放公開免費測試，敬請期待。
相關連結
- Local Context 開發文件
- How to refresh local info based on user and business needs with Local Context
- Announcing Local Context beta from Google Maps Platform
- 程式語法範例 – Basic Local Context Library map
- 程式語法範例 – Adjusting Local Context Search Bounds
- 程式語法範例 – Residential Neighborhood Viewer
- 程式語法範例 – Customizing the Local Context Map
- 程式語法範例 – Responding to Local Context Events
