總覽
Google 地圖平台支援網頁 (JavaScript、TypeScript)、Android 和 iOS,也提供網頁服務 API,可擷取地點、路線和距離等資訊。本指南只以一種平台舉例說明,同時提供其他平台的說明文件連結,方便您參考。
交易明細若使用「ACMEHCORP」這樣的縮寫 (而非「Acme Houseware」這類商家名稱),使用者通常覺得不易理解,可能會導致客戶服務來電數增加,引發代價高昂的糾紛。「多元化交易」可簡化這些交易,讓使用者一看就懂,方法包括提供商家全名和業務類別、店面相片、地點和地圖上的位置,及完整的聯絡資訊等。這不但有助於提升使用者滿意度、促進資訊公開,也能減少客戶服務來電數、增加淨推薦值,並吸引使用者在應用程式內停留更長時間。
「多元化交易」完美結合各項 Google 地圖平台 API,有助您打造良好的交易記錄使用體驗。建議您參閱本主題介紹的導入指南和自訂提示,瞭解如何運用多元化交易。本導入指南會說明如何將地點與特定商家進行比對,以及如何顯示商家詳細資訊。
啟用 API
如要導入「多元化交易」,請在 Google Cloud 控制台中啟用下列 API。以下超連結會將您帶往 Google Cloud 控制台,為選取的專案啟用各項 API:
如要進一步瞭解設定,請參閱「開始使用 Google 地圖平台」一文。導入指南章節
以下為本主題將說明的實作和自訂項目。
- 勾號圖示代表核心導入步驟。
- 星號圖示為選用但建議使用的自訂項目,可強化解決方案。
將商家與 Google 地圖平台進行比對 | 將交易記錄中的商家與 Google 地圖平台中的地點建立關聯。 | |
顯示商家詳細資料 | 顯示多元化資料的交易,內含與商家相關的實用資訊,方便使用者快速辨識交易。 | |
新增商家地點的地圖 | 新增商家地點的地圖。 |
將商家與 Google 地圖平台進行比對
此範例使用:Places API |
下圖說明應用程式如何使用現有商家資料庫的 Place Details 或透過 Place Search 要求,比對商家交易並傳回結果:
取得 Google 地圖平台地點 ID
您可能已建有商家資料庫,內有商家名稱及地址等基本資訊。如要取得 Google 地圖平台內的地點資訊 (包括聯絡資訊和使用者提供的資訊),請備妥與資料庫內各商家對應的 Google 地圖平台地點 ID。
而要取得商家地點 ID,可以向 Places API 中的 /findplacefromtext 端點發出要求,且限定只要 place_id
欄位即可;這樣系統才會認定這是不收費的 Find Place - ID only 呼叫。如果商家有多個地點,請將商家名稱與城市或街道名稱搭配使用。呼叫傳回的資料品質各不相同,因此請確認傳回的結果是否確實與所需商家相符。
以下舉例說明如何使用商家名稱和城市,要求 Google 台北辦公室的地點 ID:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20taipei&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_enrichedtransactions_v1_a
請務必對 API 要求中的輸入參數進行網址編碼。
儲存地點 ID
如要儲存 Google 地圖平台上的商家資訊,以便用於日後的要求,您可以將此地點 ID 當成商家記錄屬性,無限期儲存於資料庫中。每個商家只需執行一次 Find Place 要求。此外,您也可以在每次使用者要求交易明細時搜尋地點 ID。
為確保您隨時都能取得最準確的資訊,請使用 place_id
參數搭配 Place Details 要求,每 12 個月重新整理一次地點 ID。
如果顯示的 Place Details 與交易商家不符,建議您允許使用者就商家比對的品質提出意見。
顯示商家詳細資料
此範例使用:Places API | 同時支援:Places SDK for Android | Places SDK for iOS | Maps JavaScript API 的 Places Library |
您可以在使用者造訪其中一個地點後,向他們提供必要的 Place Details。有了多元化資料的 Place Details (例如聯絡資訊、營業時間、使用者評分和使用者相片),應用程式便可提醒使用者有哪些已完成的交易。呼叫 Places API 並取得 Place Details 後,您可在資訊視窗、網頁側欄,或以任何您想要的方式 (在服務條款允許的範圍內) 篩選及呈現回應。
如想要求 Place Details,您需要各個地點的地點 ID。請參閱「取得地點 ID」一節,瞭解如何擷取地點 ID。
以下 Place Details 要求會在 Google 台北 101 地點 ID 的 json
輸出結果中,傳回地址、座標、網站、電話號碼、評分和營業時間:
https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJraeA2rarQjQRyAqIxkx2vN8&fields=name%2Cformatted_address%2Cwebsite%2Cformatted_phone_number%2Cgeometry/location%2Cicon%2Copening_hours%2Crating&key=YOUR_API_KEY&solution_channel=GMP_guides_enrichedtransactions_v1_a
新增商家地點的地圖
此範例使用:Geocoding API | Maps Static API | 同時支援:Android | iOS |
判斷商家地點
Maps Static API 接受在地址或座標上放置標記。如果商家記錄已有地址,則可往後跳到下一節 (但為了提高地圖精確度,我們建議您使用座標而非地址)。
如果商家資料庫有街道地址而沒有地理座標,且尚未要求 Place Details,那麼您就可以在伺服器端使用 Geocoding API 將街道地址轉換為經緯度座標,然後將座標儲存在資料庫中,並以至少每 30 天一次的頻率重新整理座標。
以下舉例說明如何使用 Geocoding API 取得 Google 台北辦公室地點 ID 的經緯度:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJraeA2rarQjQRyAqIxkx2vN8&key=YOUR_API_KEY&solution_channel=GMP_guides_enrichedtransactions_v1_a
將商家地點標記加入地圖
使用者查看地圖是為了確認交易,而不是要瀏覽或導航,因此請建立互動性有限的地圖。
如果是電腦版和行動版網站,請運用商家的經緯度或地址,建立含有單一標記的 Maps Static API 網址。您可以透過網路服務呼叫來使用 Maps Static API,如此便會根據您指定的參數來建立圖片版本的地圖。如果是行動裝置,請跳到下一節:在行動應用程式中加入地圖。
下列呼叫會顯示尺寸為 640x480 像素的道路圖,以位於 Google 台北辦公室的標記為地圖中心,並使用預設縮放等級。此外,這個呼叫也會指定紅色的送貨地點標記和雲端式地圖樣式設定:
https://maps.googleapis.com/maps/api/staticmap?size=640x480&markers=color:red%7C25.033976%2C121.5645389&map_id=b224095f76859890&key=YOUR_API_KEY&signature=BASE64_SIGNATURE&solution_channel=GMP_guides_enrichedtransactions_v1_a
此呼叫可分為以下幾個部分:
API 網址 | https://maps.googleapis.com/maps/api/staticmap? |
圖片大小 | size=640x480 |
商家地點標記 (使用網址編碼) | markers=color:red%7C25.033976%2C121.5645389 |
雲端式地圖樣式設定 | map_id=b224095f76859890 |
API 金鑰 | key=YOUR_API_KEY |
數位簽章 (瞭解如何數位簽署要求) | signature=BASE64_SIGNATURE |
解決方案管道參數 (請參閱參數說明文件) | solution_channel=GMP_guides_enrichedtransactions_v1_a |
顯示的圖片如下所示:
您也可以使用地址做為標記位置:
https://maps.googleapis.com/maps/api/staticmap?size=640x480&markers=color:green%7CTaipei%20101%20Tower%2CNo.%207信義路五段信義區台北市%20Taiwan%20110&map_id=b224095f76859890&key=YOUR_API_KEY&signature=BASE64_SIGNATURE&solution_channel=GMP_guides_enrichedtransactions_v1_a
如需其他參數選項,請參閱 Maps Static API 說明文件。
在行動應用程式中加入地圖
如果使用 Maps SDK for Android 或 Maps SDK for iOS,便可依 Place Details 中的座標放置標記。
使用者查看地圖是為了確認交易,而不是要瀏覽或導航,因此請選用互動性有限的地圖:
- 如果是 Android 應用程式,請參閱「加入含有標記的地圖」教學課程,並啟用精簡模式來提供有限的互動功能。
- 如果是 iOS 應用程式,請參閱「加入含有標記的地圖」教學課程,並使用
GMSUiSettings
標記停用控制項和手勢。