地址自動完成（Google Maps）

有了地址自動完成，Sami B2B Onboarding 會在買家開始輸入街道時顯示 Google 的地址建議。選擇其中一項建議後，該地址的其餘欄位就會自動填入。買家可以更快完成表單，應用程式在 Shopify 中建立的公司據點也會有乾淨的地址。

您只需為商店新增一組 Google Maps 金鑰。每份表單各自決定是否開啟自動完成。

注意

開始之前，您需要一個已設定帳單的 Google Cloud 帳號。Google 要求完成這項設定後，才能使用其 Maps API。

在 Google Cloud 中建立瀏覽器金鑰

1. 選擇專案

   開啟 Google Cloud 主控台並建立專案，或選擇您要使用的專案。

2. 啟用 API

   在 APIs & Services › Library 中，搜尋並啟用 Maps JavaScript API，接著啟用 Places API。前者負責在您的商店前台載入建議，後者負責尋找地址。

3. 建立金鑰

   在 APIs & Services › Credentials 中，點擊 Create credentials › API key。複製該金鑰，它以 AIza 開頭。

4. 將金鑰限制在您的商店

   開啟金鑰的設定：

   1. 在 Application restrictions 下，選擇 Websites，並新增您的商店使用的每個網域，例如 https://example.com/* 和 https://your-store.myshopify.com/*。
   2. 在 API restrictions 下，選擇 Restrict key，並選取 Maps JavaScript API 和 Places API。
   3. 點擊 Save。

警告

金鑰會寫入您的商店前台頁面，因此任何人都能在該處讀取。網站限制可以防止他人使用這組金鑰，導致您的 Google 帳單增加。應用程式的面板也會提醒您：This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

新增金鑰並開啟功能

1. 開啟 Address autocomplete 面板

   前往 Forms，點擊表單旁的 Edit。在左側導覽列中點擊 Integrations。在 Connected apps 下，點擊 Address autocomplete 該列的 Set up。

   Address autocomplete 面板會開啟，包含兩個區段：Account 和 This form。

   

   點擊 Set up 新增您的金鑰；面板會說明哪個欄位會顯示建議，並提醒您限制金鑰。

2. 貼上金鑰

   在 Account 下，點擊 Set up。在 Address autocomplete 對話框中，將金鑰貼到 Maps API key，然後點擊 Save。您會看到 Keys saved，且 Account 列會顯示該金鑰。

3. 啟用

   在面板底部，點擊 Enable。按鈕會變成 Disable，且 Connected apps 中的 Address autocomplete 列會顯示 Active。如果尚未儲存任何金鑰，會出現橫幅 Add your Maps API key first.

4. 儲存表單

   點擊儲存列中的 Save。您會看到 Form saved。

會填入哪些欄位

建議會出現在表單 Shopify 面板中對應到 Address line 1 的每個欄位。如面板所說，When a buyer starts typing in a field mapped to Address line 1, Google suggests addresses. Picking one fills that block’s city, state, postal code and country.

買家選擇一項建議後，應用程式會填入同一地址中對應到下列項目的欄位：

對應到	填入內容
Address line 1	街道門牌號碼和街道名稱
City	城市或城鎮
State / province	州或省
ZIP / postal code	郵遞區號
Country	國家/地區

• Address line 2、Recipient 和 Phone 由買家自行填寫。
• 運送地址和帳單地址互不影響。選擇運送地址絕不會更動帳單欄位。
• 買家仍可修改任何已自動填入的欄位。
• 建議會以商店頁面的語言顯示。

應用程式建立的 Wholesale application 表單已為兩個地址對應好這些欄位。如果您自行建立地址問題，請在 Company location 中進行對應。請參閱將答案對應到 Shopify。

在商店前台檢查

1. 開啟表單

   前往 Forms，點擊表單旁的 Copy link。在無痕瀏覽器視窗中開啟該連結。

2. 輸入地址

   在 Shipping address 下，開始在 Address line 1 中輸入，例如 123 Main Street。Google 的建議清單會在欄位下方展開。

3. 選擇建議

   點擊清單中的地址。該地址的 City、ZIP or postal code、Country 和 State or province 會自動填入。

如果沒有出現任何建議：

檢查項目	處理方式
Address autocomplete 列顯示 Active，且表單已儲存。	在面板中點擊 Enable，然後點擊 Save。
金鑰的網站限制包含您正在測試的網域。	您的商店可透過自己的網域和 myshopify.com 網域存取。請在 Google Cloud 中同時新增兩者。
Maps JavaScript API 和 Places API 已啟用，且專案已設定帳單。	在 APIs & Services › Library 中啟用它們。
該欄位已對應到 Address line 1。	在 Shopify 面板的 Company location 下進行對應。

關閉功能

• 在單一表單上：開啟其 Address autocomplete 面板，點擊 Disable，然後點擊 Save。
• 在所有表單上：在 Account 下，點擊 Change，然後點擊 Remove keys。對話框會警告 Every form in this store stops using Address autocomplete until you add keys again. 點擊 Remove keys 確認。

後續步驟

• 將答案對應到 Shopify：對應您的地址問題，讓它們填入公司據點。
• 建置表單：在表單中新增地址欄位。
• 驗證碼（reCAPTCHA、hCaptcha）：防止機器人使用同一份表單。