Checking data returned from Google Address Autocomplete address search

In this article, you will learn how to check what was returned from the Google Maps API when searching for addresses using our add-on Google Address Autocomplete for WooCommerce.

We assume that you have already followed our guide Getting started with Google Address Autocomplete and that you can see and select addresses from the suggested addresses. If not, check the troubleshooting section at the end of this article.

Enabling debug mode in Google Address Autocomplete settings #

1. Go to the plugin settings at WP Admin > WooCommerce > Settings > Integration > Google Address Autocomplete.
   Locate the “Debug options” and check the option “Enable debug mode”.
2. Click on “Save changes”.

Checking data returned in the browser console log #

When debug mode is enabled, the Google Address Autocomplete plugin will “save” the data returned from the Google Maps APIs when searching and selecting a suggested address into the browser developer tools.

You can use this data to determine if Google has all the data related to your selected address, in case some fields are not filled up after selecting a suggested address, or to determine what are the data components to be used for any custom fields you might have added to your address forms on the checkout page.

1. Open your website in a web browser.
2. Add any item to your cart.
3. Navigate to the checkout page.
4. Enter any data in the Contact step.
5. Proceed either to the Shipping or Billing steps where you have an address section.

6. Open the browser’s developer tools by pressing F12 or right-clicking on the page and selecting the option “Inspect” or “Inspect Element” on the context menu.

7. In the developer tools, select the “Console” tab.
8. Back to your checkout page, start typing an address into the Street address field, and select one of the suggested addresses.
9. Again on the developer tools, check the messages in the console log. You should see an expansible message that says Object or { address_components: Array(9) ... }. If you can’t easily find those messages, you can use the filter field and search for address_components.

10. Expand the respective [Object] or { address_components: ... } message on the browser console, then expand the address_components property, where all the relevant address data is.
11. Expand specific fields to see their details. Use the property types within each specific field to determine what that field is about. See below a mapping of the most common data used and which fields each represents.

Data types and mapping to the checkout fields #

Address fields returned by the Google Maps APIs do not always match the checkout fields. Because of that, we need to map the checkout fields to the data fields returned by the Google Maps APIs.

Below is the most common mapping for the checkout fields in relation to which data field types of the returned data are used from Google Maps APIs:

Please note that this is not an extensive or complete list of fields and the mapping of the related data fields from the Google Maps APIs, and it can vary depending on the country and locale.

Troubleshooting #

In case you have any problems when searching for addresses please make sure you followed all the steps in our Getting started with Google Address Autocomplete guide.

If you still having problems using the plugin, also check our article Why Google Addresses Autocomplete is not working.