How to Enable Google Address Autocomplete

AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Optimizations
  5. How to Enable Google Address Autocomplete

How to Enable Google Address Autocomplete

It is often tedious for users to type in their address on the checkout, especially on mobile.

The small screen size and frequent mistypes lead to costly failed deliveries and hampers the customer-buyer relationship.

Google Address Autocomplete is a solution to this problem.

checkout-page-optimization-google-address-autocomplete

When users enter the first few characters of their address on the checkout form, Google shows potential address suggestions to them in a drop-down.

Users can simply choose the one and the rest of the address will be automatically filled up.

Aero Checkout lets you enable Google Address Complete on your checkout pages to make the checkout process easier and faster for the prospects.

Broadly there are 2 steps to set this up in AeroCheckout:

  • Purchasing a Google Maps API Key/ Getting the API Key
  • Linking the purchased API key with Aero Checkout

Purchasing a Google Maps API Key

This will be the first procedure. Here you’ll get to know from where and how you need to purchase an API Key.

Watch this vidoe

Follow the steps below:

Step 1: Enable Google Maps Platform

Navigate to the Google Maps Platform and click on the ‘Get Started’ button in the top right corner of the site.

Select the Maps, Routes and Places check boxes and press continue.

Step 2: Select a Project

If this is your first time creating an API key, you will have to create a Project first.

  • Give your Project a name.
  • Click the next button at the bottom-right of the window.

Step 3: Set up your billing

Wait for the billing prompt and select ‘Create Billing Account’.

Select your country and accept Terms of Service. Click Continue.

Enter your customer info (details) and card information.

Select ‘START MY FREE TRIAL’.

Please note that you a 12-month or $300 credit free trial. When this free trial ends, you will get up to 28,000 map requests per month and 40,000 direction calls per month, free of charge. You will only be billed when your usage exceeds your monthly $200 credit limit.

For more information about the free trial, please refer to Google’s documentation.

Once your billing has been set up, you can move onto creating your API Key.

Step 4: Generate Your API Key

You will now receive your API Key.

Copy the API key to your clipboard.

Getting the Google Maps API Key

If you already have an active Google Maps Platform account and want to know your API key then follow these steps:

Step 1: Go to the Google Cloud Platform Console

Click here to go to the Google Cloud Platform Console.

Next, click on the Project drop-down and select the specific project for which you want to add an API key.

Of course, you can create a new project, depending on your requirements.

Step 2: Go to Menu and select the ‘Credentials’ option

Select ‘APIs & Services’ from the list of options.

Step 3: Click on ‘Create credentials’ > API Key

On clicking the ‘+Create Credentials’ button, a drop-down appears.

Select ‘API Key’ here:

When you do so, a popup appears.

Here you’ll get to see your new API key:

Now copy this API key and paste it in your clipboard or use it anywhere you want.

You’ll see this new API key listed on the Credentials page under ‘API Key’:

There you go! That’s how you can get your new API Key.

Linking the purchased API key with Aero Checkout

Return to your WordPress site and navigate to the AeroCheckout Global Settings.

Step 1: Click on Settings from WooFunnels

You’ll land on the global settings page of AeroCheckout.

Next, click on the Address Autocomplete tab.

Step 2: Insert the purchased Google Maps API Key here

Once done, hit the ‘Save changes’ button.

Step 3: Go to the Optimizations tab and enable Google Address Autocomplete

In the Optimizations tab, you’ll find that the first option is Google Address Autocompletion.

Hit the toggle and enable it.

That’s it, you’ve now enabled Google Address Autocomplete for the selected AeroCheckout page.

Additionally, you can choose to disallow some countries where you think that it might not be accurate.

For that, you can select the countries for which you want to disable this feature.

Restrict access to your API Key

After pasting the API Key to your WordPress site and saving the settings, return to the Google API Manager.

You will want to restrict access to your API Key to avoid having it “hijacked” and going over your quota.

For that, click the API Console link on the Enable Google Maps Platform window as shown.

Select ‘HTTP referrers (web sites)’ and enter the following domains under ‘Accept requests from these HTTP referrers (web sites)’, replacing yourdomain.com with your domain name.

*yourdomain.com/*

Please note that the Google Maps API is very specific about how this field is formatted – so use exactly this format.

Click the ‘Save’ button to save your key restrictions.

Now you need to enable the required API functions for your project.

Click the Library link in the API Manager sidebar menu.

Next, press the Google Maps JavaScript API panel.

The JavaScript API will probably already be enabled as shown in the screenshot below.

If the JavaScript API is not enabled, then click Enable on the Google Maps Javascript API window.

That’s it, now you’re good to go!