Skip to main content

Enable autocomplete for address fields using Google Maps

Connect your form to Google Maps to enable autocomplete for address fields

Brett Shelley avatar
Written by Brett Shelley
Updated over a week ago

Let customers enter their address information faster and more accurately

The app's form builder allows you to enable autocomplete for addresses using the power of Google Maps to suggest physical addresses and autocomplete address fields.

As shown in the example below, this feature makes it much easier for customers to fill out address fields on a Customer Fields form. It also helps to avoid typos so you can ensure that your customer's address data is accurate.

Connect to Google Maps

You'll need to create an API key within your Google account in order to connect a Customer Fields form to Google Maps. The API key from Google needs to have access to the Places API.

❗Important note: You must have a Google account with billing enabled to use an API key for Google Maps. Even though billing is required, most stores will be able to use the Google Maps APIs for no cost (free!). See this pricing page for more details.

Enable the APIs and create a key

Here's a step-by-step guide for creating an API key for Google Maps:

  1. Go to console.cloud.google.com and log in using your Google Account

  2. Create a new project or select an existing project using the top navbar

  3. After you've selected a project, use the search bar at the top of the page to search for and open the Library page

  4. In the Maps section of the API Library, click on Places API and then click the button for ENABLE

    1. If you have not already done so, you may be asked here to set up your payment profile.

  5. Use the search bar again to search for and open the Credentials page

  6. At the top of the page, click the button for CREATE CREDENTIALS and select API key

  7. In the modal that pops up, click the link for Edit API key

  8. In the API restrictions section, select Restrict key

    1. Select Places API, and then click OK

  9. Click the SAVE button

  10. Once the page refreshes, click on Show key next to the new key you created, which will open a popup modal where you can use the "copy" icon next to the API key to copy it to your computer's clipboard

Add Google Maps API key in the Onboard app

Once your Google Maps API key has been created, you can enable the autocomplete feature on your form by pasting the API key from your clipboard into the app's form settings:

  • In the Onboard B2B app's form editor, go to the Advanced settings tab

  • Click the Connect button in the Google Maps API Key section

  • Paste in your key and click Apply

    brett-staging · Company Profiles (Staging) · Shopify 2025-04-16 at 11.58.10 AM

Save the form and test the autocomplete feature on the storefront

After you have enabled address autocomplete and saved the form changes, make sure to test the feature on your form by typing into the address field.

  • If you see address suggestions from Google when typing into the address field, then you can rest assured that the feature is working properly.

  • If you see a red error below the address field, then that indicates there is a problem with the API key. Make sure to go back through the steps above and double-check that your Google account has billing enabled.
    ​

Did this answer your question?