結帳畫面導入指南

總覽

網頁 iOS API

Google 地圖平台支援網頁 (JavaScript、TypeScript)、Android 和 iOS，也提供網頁服務 API，可擷取地點、路線和距離等資訊。本指南以其中一種平台舉例說明，但也提供了其他平台的說明文件連結，方便您參考。

立即建構！

您可以利用 Google Cloud 控制台中的「快速建構工具」，在互動式使用者介面內取得系統產生的 JavaScript 程式碼，建構地址表單自動完成功能。

線上購物和訂購已然成為日常生活的一部分。不論是當日送達服務、叫車或訂購晚餐，客戶都期望結帳流程順暢無阻。

不過，麻煩費時的帳單/運送地址輸入步驟常是這些應用程式的通病，導致使用者結帳不順。順暢的結帳體驗在行動掛帥的世界中尤其重要，因為在小螢幕上進行繁雜的文字輸入有時相當麻煩，阻礙客戶完成轉換。

您可根據本主題提供的指引導入預測地址輸入功能，協助客戶加快結帳流程。

請參閱下圖，瞭解導入結帳流程時會用到哪些核心 API (按一下即可放大圖片)。

啟用 API

為了導入結帳流程，您需要在 Google Cloud 控制台中啟用下列 API：

設定詳情請參閱「開始使用 Google 地圖平台」一文。

做法章節

以下是本主題將介紹的實用秘訣和自訂項目。

勾號圖示代表核心做法。
星號圖示為非必要但建議採用的自訂項目，可強化解決方案。

	在輸入欄位中加入自動完成功能	自動填入地址表單。加入「預先輸入功能」可改善所有平台的使用者體驗，同時盡量減少使用者的打字次數，提高地址正確度。
	利用 Maps Static API，提供視覺化的確認畫面	找出特定地址的經緯度座標 (地理編碼)，或將地理位置的經緯度座標轉換為地址 (反向地理編碼)。
	進一步改善結帳畫面的提示	使用 Place Autocomplete 進階功能，提供更順暢的結帳體驗。

注意：為追蹤解決方案程式碼範例的採用率，並改善解決方案品質，Google 會在本頁程式碼範例的 API 呼叫中，加入 solution_channel 查詢參數。如不想使用上述功能，請直接從程式碼範例中刪除 solution_channel 查詢參數。如要進一步瞭解相關詳情，請參閱這篇文章中關於「Google 地圖平台解決方案參數」的說明。

在輸入欄位中加入自動完成功能

此範例使用：Places Library、Maps JavaScript API

同時支援：Android | iOS

Place Autocomplete 能夠簡化在應用程式中輸入地址的過程，提供客戶流暢體驗並提升轉換率。自動完成功能會提供 1 個快速輸入欄位，當中配合使用者輸入的文字顯示「預先輸入」預測地址，讓系統將使用者選用的地址填入帳單或運送地址表單。

為線上購物車整合 Place Autocomplete 功能有下列好處：

減少地址輸入錯誤。
減少結帳流程包含的步驟數。
簡化行動裝置或穿戴式裝置上的地址輸入體驗。
大幅減少客戶訂購產品/服務時所花的時間和打字次數。

使用者勾選「自動完成」輸入方塊並開始輸入文字時，系統會在清單中顯示預測地址：

使用者從預測清單中選取地址後，您可以利用該回應驗證地址並取得位置資訊，接著應用程式就會將資訊填入地址輸入表單中的正確欄位：

影片：利用 Place Autocomplete 功能改善地址表單：

地址表單

網頁

Android

iOS

開始使用 Place Autocomplete 功能

只要加入幾行 JavaScript 程式碼，就能在網站中導入 Place Autocomplete 功能。

最簡單的方式是在網站中導入 Maps JavaScript API (即使網站不顯示地圖也可以這麼做)，並按照下方範例指定 Places Library (這樣會一併執行初始化函式)。

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>

接著，在網頁中加入使用者可輸入內容的文字方塊。

<input id="autocomplete" placeholder="Enter your address"></input>

最後，初始化「自動完成」服務並連結至已命名的文字方塊。

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

在上一個範例中，當使用者選擇某一個地址預測字串時，系統會觸發 place_changed 事件監聽器，並執行 fillInAddress 函式。如下方範例所示，這個函式會從指定回應中擷取地址元件，並顯示在表單中。

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}index.ts

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;
index.js

您可以用取得的地址資料做為使用者的相符地址。只需幾行程式碼，就可確保客戶能夠快速地輸入正確地址。

如需填入地址輸入表單的有效試用版和完整原始碼，請參考此程式碼範例。

Place Autocomplete 導入注意事項

如果您想使用的不只有小工具，可透過多種選項彈性靈活地導入 Place Autocomplete 服務。您可以搭配使用多項服務，取得正確比對地點所需的資訊。

以地址表單來說，您可以將 types 參數設為 address，限制系統只比對出完整的街道地址。若想瞭解 Place Autocomplete 要求支援哪些類型，請參閱這篇文章。
如果不需搜尋全世界的地址，可以設定適當的限制和偏好。有多個參數可限定或限制只比對出特定區域的地址。
- 使用 bounds 設定限制區域的矩形邊界，使用 strictBounds 確保系統只傳回這些區域中的地址。
- 使用 componentRestrictions 將回應限制於特定的一組國家/地區。
建議將欄位設為可編輯，萬一比對結果遺漏了部分欄位，客戶可以視情況更新地址。Place Autocomplete 傳回的地址大多都不包含次要場所號碼 (例如公寓、套房或住宅號碼)，因此上述範例將重點移至第 2 行地址，鼓勵使用者視需要填入資訊。

利用 Maps Static API，提供視覺化的確認畫面

輸入地址後，請顯示簡單的靜態地圖讓使用者查看並確認送貨或取貨地點。這樣能讓客戶再次確保地址正確無誤，而且可減少送貨/取貨失誤的情形。靜態地圖可顯示在客戶輸入地址的網頁中，或客戶完成交易後寄送的確認電子郵件中。

這兩種用途都可透過 Maps Static API 達成，這個 API 可在網頁或電子郵件內的任何圖片代碼中，加入圖片版本的地圖。

開始使用 Maps Static API

您可以透過網路服務呼叫使用 Maps Static API，這麼做可根據您指定的參數建立圖片版本的地圖。和動態地圖一樣，您可以指定地圖類型、使用相同的雲端式樣式和加入標記以區分地點。

下方的呼叫範例會顯示尺寸為 600x300 像素的道路圖，以位於加州山景城的 Googleplex 為地圖中心，縮放等級為 13；同時會指定藍色的送貨地點標記和線上地圖樣式。

      https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
      &zoom=13
      &size=600x300
      &maptype=roadmap
      &markers=color:blue%7Clabel:S%7C37.422177,-122.084082
      &map_id=8f348d1b5a61d4bb
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_checkout_v1_a

此呼叫可分為以下幾個部分：

API 網址	https://maps.googleapis.com/maps/api/staticmap?
地圖中心	center=37.422177,-122.084082
縮放等級	zoom=13
圖片大小	size=600x300
地圖類型	maptype=roadmap
店家地點標記	markers=color:blue%7Clabel:C%7C37.422177,-122.084082
雲端地圖樣式	map_id=8f348d1b5a61d4bb
API 金鑰	key=YOUR_API_KEY
解決方案管道參數 (請參閱參數說明文件)	solution_channel=GMP_guides_checkout_v1_a

顯示的圖片如下所示：

如要進一步瞭解 Maps Static API 選項，請參閱說明文件。

進一步改善結帳畫面的提示

善用 Place Autocomplete 提供的幾個進階功能，就能進一步提升客戶體驗。比方說，您可以利用下列幾個訣竅，讓啟用「自動完成」功能的地址輸入方塊更加實用：

允許使用者根據商家或搜尋點名稱輸入地址。「預先輸入」預測服務不僅可用於地址，也可允許輸入商家或地標名稱。使用者輸入商家名稱後，只要呼叫 Place Details，就能輕鬆擷取所需地址。別忘了從自動完成定義中移除 types 屬性，讓客戶輸入地址和地點名稱。
配合網站樣貌自訂 Place Autocomplete 方塊的外觀和風格，此外還可以根據購物車的外觀和風格，調整自動完成小工具的樣式。我們提供了一組 CSS 類別供您進行自訂。若想進一步瞭解如何設定自動完成方塊的樣式，請參閱說明文件。
如想自訂使用者介面呈現個人特色，而不是使用 Google 設計的使用者介面，請以程式輔助方式呼叫 Place Autocomplete 服務，擷取輸入內容的預測字串。您可以在 JavaScript、Android 和 iOS 中，以程式輔助方式擷取 Place Autocomplete 的預測字串，同時透過 Places API 直接呼叫網路服務 API。