Getting started with Google Address Autocomplete

You are just a few steps away from helping your customers complete the checkout form even faster with Google Address Autocomplete for WooCommerce.

We know that setting up the Google Places API can be a challenge. That’s why we gathered the information below to help you set it up and get using your the plugin in no time.

In this guide, we’ll walk you through the necessary steps to set up of your Google Cloud Console project and Google API key, and enabling the Google Address Autocomplete feature in the plugin settings.

To get the Google API Key ready to use with the plugin Google Address Autocomplete, you will need to:

• Set up an account at Google Cloud Console
• Create a project on Google Cloud Console for your website
• Enable billing for your Google Cloud Console account and project
• Create your Google API Key credential for your project
• Authorize your Google API Key to access specific Google Libraries (APIs)
• Configure your Google API Key to restrict access only for your website

Because the Google Maps APIs can only be loaded once for the same page, if you are using other plugins which use the Google Maps API on the checkout page or even other pages on your website, and because you probably would already have a Google API key, you might want to skip to the step: Authorize your Google API Key to access specific Google Libraries (APIs).

Then, you’ll need to enable the Google Address Autocomplete plugin features on the plugin settings:

• Enable Google Address Autocomplete feature on the plugin settings
• Enable Autocomplete from CEP field for Brazilian websites on the plugin settings

And when troubleshooting, you might want to enable the debug mode on the plugin settings:

• Enable debug mode

Get your Google API Key ready #

Set up an account at Google Cloud Console #

1. Go to the Google Cloud website at https://cloud.google.com/.
2. Choose the option “Sign in” or “Start free” at the top right part of the screen. If you are already logged in, you can use the option “Console” instead.
3. Once you create your account and/or sign in with your Google account, go to the Google Cloud Console platform at https://console.cloud.google.com/

Create a project on Google Cloud Console for your website #

1. At the Google Cloud Console platform homepage, choose the option “Select a project” at the top of the screen.

2. On the projects list screen, choose the option “New project” at the top right of the popup screen.

3. On the “New project” form screen, fill in the required information:
4. Enter your project name in the field “Project name”, you can use any name that would be easy for you to recognize in the future. We recommend using your website name here.
5. Select your organization in the field “Location“. If you have an organization set up in your Google Cloud account that you want to link your project to, click Browse and select it; otherwise, choose “No organization”.
6. (optional) Select a billing account for the project. If you have not set up a billing account or only have one billing account, you will not see this option.
7. Review the information entered and choose the option “Create” at the bottom of the “New project” form screen.

8. Wait until the project creation is completed and proceed to the next step: Enable billing for your Google Cloud Console account.

Enable billing for your Google Cloud Console account and project #

Important: Depending on your usage, charges from Google might be incurred.

At the time of writing this guide, Google gives you 200 USD/month of free in credits towards using the Google Places and Google Maps APIs, along with other resources.

That is enough for processing roughly 11.000 orders in your store with address autocompletion + place details.

The address autocomplete + place details session is defined by searching for an address and then selection one of the suggested addresses. If the customer searches for a shipping address and then search again for another billing address, it will be counted as 2 sessions.

After this limit is reached, you’ll be charged from Google according to their pricing for these resources.

See more about Google Maps Platform pricing

More information on setting up your Google Console account, billing budget and alerts can be found on the guide Set Up in the Google Cloud Console from Google’s documentation.

1. Go to the Google Cloud Console platform at https://console.cloud.google.com/ — and sign in with your Google Account.
2. At the Google Cloud Console platform, choose the option “Menu” at the top of the screen and then choose the option “More products > Billing”.

3. At the Billing screen, choose the option “Link a billing account”.

4. If you do not have a billing account created yet, choose the option “Create billing account” and follow the steps on the screen to create your billing account. Once you complete creating your billing account, that billing account will be automatically linked to your project.

5. If you already have a billing account created, you will be prompted to select a billing account for the project. Select your billing account and choose the option “Set account” at the bottom right of the popup screen.

Create and configure your Google Places API Key #

Create your Google API Key credentials #

1. Go to the Google Cloud Console platform at https://console.cloud.google.com/ — and sign in with your Google Account.
2. At the Google Cloud Console platform, choose the option “Menu” at the top of the screen and then choose the option “More products > APIs & Services > Credentials”.

3. At the APIs & Services page, choose the option “Create credentials” at the top of the page, then “API key” on the dropdown menu shown.

4. Wait for the API key to be created, the API key will be shown once the process is completed. Choose the option “Close” at the bottom right of the popup screen.

5. Back to the Credentials and API Keys list, choose the option with “three dots” related to your recently created API Key, then choose the option “Edit API key”.

6. On the API Key edit screen, give your API key a name that would be easy to recognize in the future. We recommend using your website domain name here (in our case, it would be “fluidcheckout.com”)

7. Scroll to the bottom of the API Key edit screen and choose the option “Save” at the bottom of the page.

You can safelly skip the API restrictions options as you will be configuring it later on the step: Configure your Google API Key to restrict access only for your website. Before that, you’ll need to enable the access to the APIs as explained in the next step: Authorize your Google API Key to access specific Google Libraries (APIs).

Authorize your Google API Key to access specific Google Libraries (APIs) #

The Google Address Autocomplete plugin makes use of the following APIs depending on your configuration and needs. You’ll need to enable access for each of the APIs as listed below:

• Places API (required)
• Maps JavaScript API (required)
• Geocoding API (required)
• Geolocation API (required)

Follow the instructions below to enable access to each API.

Places API (required) #

1. Go to the Google Cloud Console platform at https://console.cloud.google.com/ — and sign in with your Google Account.
2. At the Google Cloud Console platform, choose the option “Menu” at the top of the screen and then choose the option “More products > APIs & Services > Library”.

3. At the Libraries search screen, enter the term “Places API” and press the “ENTER” key to search for the API.

4. Choose the option “Places API” in the search results to open the API details page.

5. On the API details page for the “Places API”, choose the option “Enable” to enable its use on your project.

6. If the option “Enable” is not available, and instead the option “Manage” is displayed along with the text “API Enabled”, you can safely skip to the next step: Maps JavaScript API.

Maps JavaScript API (required) #

1. Go to the Google Cloud Console platform at https://console.cloud.google.com/ — and sign in with your Google Account.
2. At the Google Cloud Console platform, choose the option “Menu” at the top of the screen and then choose the option “More products > APIs & Services > Library”.

3. At the Libraries search screen, enter the term “Maps JavaScript API” and press the “ENTER” key to search for the API.

4. Choose the option “Maps JavaScript API” in the search results to open the API details page.

5. On the API details page for the “Maps JavaScript API”, choose the option “Enable” to enable its use on your project.

6. If the option “Enable” is not available, and instead the option “Manage” is displayed along with the text “API Enabled”, you can safely skip to the next step: Geocoding API.

Geocoding API (required) #

1. Go to the Google Cloud Console platform at https://console.cloud.google.com/ — and sign in with your Google Account.
2. At the Google Cloud Console platform, choose the option “Menu” at the top of the screen and then choose the option “More products > APIs & Services > Library”.

3. At the Libraries search screen, enter the term “Geocoding API” and press the “ENTER” key to search for the API.

4. Choose the option “Geocoding API” in the search results to open the API details page.

5. On the API details page for the “Geocoding API”, choose the option “Enable” to enable its use on your project.

6. If the option “Enable” is not available, and instead the option “Manage” is displayed along with the text “API Enabled”, you can safely skip to the next step: Geolocation API.

Geolocation API (required) #

1. Go to the Google Cloud Console platform at https://console.cloud.google.com/ — and sign in with your Google Account.
2. At the Google Cloud Console platform, choose the option “Menu” at the top of the screen and then choose the option “More products > APIs & Services > Library”.

3. At the Libraries search screen, enter the term “Geolocation API” and press the “ENTER” key to search for the API.

4. Choose the option “Geolocation API” in the search results to open the API details page.

5. On the API details page for the “Geolocation API”, choose the option “Enable” to enable its use on your project.

6. If the option “Enable” is not available, and instead the option “Manage” is displayed along with the text “API Enabled”, you can safely skip to the next step: Configure your Google API Key to restrict access only for your website.

Configure your Google API Key to restrict access only for your website #

Adding these restrictions below is important to make sure only your websites can use the API key, avoiding extra charges from unauthorized use of your API key.

1. Go to the Google Cloud Console platform at https://console.cloud.google.com/ — and sign in with your Google Account.
2. At the Google Cloud Console platform, choose the option “Menu” at the top of the screen and then choose the option “More products > APIs & Services > Credentials”.

3. At the Credentials and API Keys list, choose the option with “three dots” related to your recently created API Key, then choose the option “Edit API key”.

4. On the API Key edit screen, select the option “HTTP referrers (web sites)” on the “Application restrictions” section.

5. A new section “Website restrictions” will be displayed below the “Applications restrictions” section. Choose the option “Add an item” in the “Website restrictions” section.

6. In the “New item” form section, enter your website referrer string. We recommend using your website domain name here (in our case, it would be “fluidcheckout.com”). Then choose the option “Done” on the right bottom part of the “New item” form section.

7. Finally, scroll to the bottom of the page and choose the option “Save”.

At this point, your Google API Key should be authorized to be used on your website to enable the Google Address Autocomplete features and for use by other plugins to display a map on your website.

Please make sure to follow the instructions to also Authorize your Google API Key to access specific Google Libraries (APIs) (previous section).

License key activation #

After installing the Google Address Autocomplete plugin, you need to activate your license key to receive automatic updates and support.

Follow the steps below to activate your license key for the Google Address Autocomplete plugin:

1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout > License keys.

2. Locate the license key field related to Google Address Autocomplete and type your license key into the field.
3. Click the button “Save changes” at the bottom of the page to save your changes and activate your license key.

If you have any issues activating your license key, please contact our support.

Enable Google Address Autocomplete feature on the plugin settings #

To enable the Address Autocompletion using the Google Maps APIs, enter the following information on the plugin settings page:

1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout > Address Autocomplete.
2. Check the option “Google Address Autocomplete > Enable Google Address Autocomplete”.
3. Enter your Google API Key in the field “Google API Key” (ie. AIzaSyCcVm8-xxxxxxxxxxxxxxxxxxxxxxxxxxx).
4. Scroll down to the bottom of the settings page and choose the option “Save changes”.

Enable Autocomplete from CEP field for Brazilian websites on the plugin settings #

To enable the Address Autocompletion via the CEP field using the Brasil API, enter the following information on the plugin settings page:

1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout > Address Autocomplete.
2. Locate the section “Brasil API Address Autocomplete”.
3. Check the option “Enable Brasil API Address Autocomplete for CEP fields”.
4. Scroll down to the bottom of the settings page and choose the option “Save changes”.

Although a Google API Key is not required for using autocomplete via the CEP field for Brazilian websites, you can use this feature alongside the Google Address Autocomplete feature which will use the Google Maps APIs to autocomplete the address fields if the customer selects an address suggestion while typing in the “Street and house number (address_1)” field. If you wish to use both Brasil API and Google Maps APIs, also follow the instructions on the step: Enable Google Address Autocomplete feature on the plugin settings.

Enable debug mode #

When using the Google Address Autocomplete feature, sometimes not all fields are filled in after selecting an address suggestion. This might happen because Google was unable to return all the data, or when you have custom fields added by another plugin or customizations in code which are not yet mapped with the data returned by the Google Maps APIs.

The plugin has a debub mode feature which will output on the Console tab in the Browser DevTools all the data returned by the Google Maps APIs and which fields were filled with which data. This can come in handy when trying to understand why some fields were not filled in, or when mapping custom fields added by other plugins or customizations in code.

Note: Please note that enabling the debug options will affect the performance of your website and should only be used while troubleshooting.

To enable the Debug mode, select the following options on the plugin settings page:

1. Go to WP Admin > WooCommerce > Settings > Fluid Checkout > Address Autocomplete.
2. Locate the section “Debug options”.
3. Check the option “Debug options > Enable debug mode”.
4. Check the option “Debug options > Load unminified assets”.
5. Scroll down to the bottom of the settings page and choose the option “Save changes”.