住所オートコンプリート（Google Maps）

住所オートコンプリートを使うと、バイヤーが番地や通りの名前を入力し始めた時点で、Sami B2B OnboardingがGoogleの住所候補を表示します。候補を選ぶと、その住所の残りの項目が自動で入力されます。バイヤーはフォームをすばやく入力でき、アプリがShopifyに作成する会社のロケーションにも正確な住所が登録されます。

Google Mapsのキーはストアにつき1つ追加します。オートコンプリートのオン／オフはフォームごとに切り替えます。

ノート

開始する前に、課金が設定された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の2つのセクションが表示されます。

   

   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でマッピングします。

オフにする

• 1つのフォームでオフにする：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にマッピングする — 住所の質問をマッピングして、会社のロケーションに入力されるようにします。
• フォームを作成する — フォームに住所フィールドを追加します。
• Captcha（reCAPTCHA、hCaptcha） — 同じフォームへのボットのアクセスを防ぎます。