AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Global Settings
  5. Address Autocomplete – How to generate Google Map API Key

Address Autocomplete – How to generate Google Map API Key

Address AutoComplete and Creating a Google Maps API Key

Getting Started

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

Step 1: Enable Google Maps Platform

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.
  • Return to your WordPress site and paste the API Key into the box labeled “Google Maps API Key” at the top of the page at WordPress Dashboard → WooFunnels→ Checkouts→ Settings→Address Autocomplete.
  • Click the Save Changes button.

After this, you need to Enable this feature to your specific checkout page. Follow this further –

  • Go to “Optimization” tab of your AeroCheckout page
  • Set the radio button to “Yes” to enable the “Google Address Autocompletion”
  • and Save changes.

Final output -> Now you will see the output here on AeroCheckout page

 

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. Click the API Console link on the Enable Google Maps Platform window as shown above.

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 – please use exactly this format.

Click the Save button to save your Key Restrictions.

Enable Required API Functions

Now you need to enable the required API functions for your project. Click the Library link in the API Manager sidebar menu. Click on 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.

Getting the Google Maps API Key

To get your API key, 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.

Now go to Menu and select the ‘Credentials‘ option under APIs & Services’.

Next, click on ‘Create credentials’ > API Key:

You’ll see the API key created popup.

Here you’ll get to see your 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!