Skip to main content

Enable autocomplete for address fields using Google Maps

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

Kyle Weiskopf avatar
Written by Kyle Weiskopf
Updated over a week ago

These instructions have been updated as of November 6, 2025 to use Google's Places (New) API. If you are using an API key created prior to this, it may be using different configuration.

Although prior configurations should continue to work, you can update to the new version by disconnecting the existing API key in the Customer Fields app and then creating a new API key using the instructions in this guide.

Let your customers enter their address information faster and more accurately

The app's form builder has a new feature inside the standard field for Address line 1 (default_address.address1) that allows you to enable autocomplete for addresses. This feature uses 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 (New) 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, open the navigation menu by clicking on the hamburger icon (found in the top left of the navbar)

  4. In the navigation menu, go to APIs & Services > Library

  5. In the Maps section of the API Library, click on Places API (New) and then click the button for ENABLE

  6. Open the navigation menu once more and go to APIs & Services > Credentials

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

  8. In the modal that pops up, click the button for RESTRICT KEY

  9. In the API restrictions section, select Restrict key

    1. Select Places API (New), and then click OK

  10. Click the SAVE button

  11. Once the page refreshes, click the "copy" icon next to the API key to copy the key to your computer's clipboard

Add Google Maps API key in Customer Fields

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

  • Click on the Address line 1 field

  • Scroll down to the Autocomplete section

  • Click the button for Connect to Google Maps

  • Paste in your key and click Apply

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 the storefront 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.

Need help?

Feel free to contact our Customer Sucess team via chat or email and we'll be happy to assist 🤗

Did this answer your question?