Skip to main content
All CollectionsCustomer FieldsConnected Apps
Enable autocomplete for address fields using Google Maps
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 year ago

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 two different APIs: the JavaScript Maps API and 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, 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 Maps JavaScript API and then click the button for ENABLE

  6. Open the navigation menu again and go back to APIs & Services > Library

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

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

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

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

  11. In the Application restrictions section, select HTTP referrers (web sites)

  12. In the Website restrictions section, add items for each referrer (URL).

    1. You'll need to add at least one referrer for your myshopify domain (example.myshopify.com). Make sure to add separate items for any other domains that will be used to access the Customer Fields form.

  13. In the API restrictions section, select Restrict key

    1. Select Maps JavaScript API and Places API, and then click OK

  14. Click the SAVE button

  15. 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.

Common error

"Failed to connect to the Google Maps API.
If you are the site owner, make sure that the Maps JavaScript and Places APIs are scoped correctly, and that 'URL_HERE' is permitted within your key’s restricted referrers."

The error above might occur if you have not included all necessary website domains in the list of restricted referrers for your site. If this error occurs, follow these steps to resolve it:

  1. Copy the URL listed in the error. i.e. www.heliumdev.com

  2. Go to console.cloud.google.com and go to APIs & Services > Credentials and then click the API key you created.

  3. In the Website restrictions section of this page, add the URL to the list of websites. It might look something like this once you've added it:
    ​

  4. Scroll down and Save. Wait at least 5-10 minutes for the changes to take effect.

  5. Check your form to ensure the error is resolved.

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?