How to Enable Google Maps API for Agile Store Locator Plugin

  • Updated on: August 19, 2024

In this article, we will explain how to enable Google Maps API in your Store Locator. Doing so will enable your website to use Google Maps and all its services.

Google has implemented its new Pricing Policy 2018 and has made API Keys mandatory for all sites with a linked billing account. However, you will never be charged extra as long as you don’t have very high usage. In addition, at the start of every month, your Google account will be credited with 200 USD to use for API services such as Direction API, Geocoding API, and Javascript Google Maps API.   Please refer to the below link to get a better idea about how much free usage is provided with a 200 USD credit. Google Pricing page.

Google Latest Pricing Sheet

In Google’s latest pricing sheet, readers will notice a few things that will be reassuring to them.

For example, In the screenshot below, you can see highlighted in red, the Maps service that our plugin uses. It offers 28,000 freeloads or more if the direction or geocoding service is used less.

Dynamic Maps Price
Dynamic Maps Price

Moreover, the second major service used is the Direction API, which offers up to 40,000 free calls in a month, which itself is a pretty high volume as well.

Directions Price
Directions Price

How to Create the Google Maps API key for the Store Locator?

This section will explain how to add the “Google Maps API key” and “Google Server API Key” to the store locator. The two API keys in question are added in “ASL Settings” under “Store Locator”, as shown in the below image

asl api key fields
ASL Settings > Google API Keys Fields

A Step-By-Step Guide to Creating the Google Maps API Keys

  1. Go to Google Cloud Console and create a “new project” by typing “project” in the search bar
  2. Name the project and click on it to view the project dashboard
  3. Click on “Go to API overview”, and go to “credentials”
Google Cloud Platform
Google Cloud Platform
  1. Click on “CREATE CREDENTIALS” to generate the “Google API Key”. Copy this key and paste it in the relevant section in “ASL Settings”
Generate API Key
API Key Generated in the Google Cloud Console
  1. To enable the API to use your library of stores, go to the Google Cloud platform and click on the “Library” tab, the 4 libraries that need to be enabled are:
    1. Maps JavaScript API
    2. Directions API
    3. Geocoding API
    4. Places API
All APIs Enabled
All APIs Enabled
  1. Go back to your store locator and check if the APIs are functioning properly

How to Restrict Google Maps API Key for your Website Only

To prevent other websites from using your API keys, please do the following:

  1. On the “Google Cloud Platform” go to “Credentials” and click on the “Credentials in APIs and services” link at the top
  2. Click on the “Edit API Key” icon
  3. On the “Restrict and rename API key” page, select the “HTTP referrers (websites)” option under “Application restriction”
  4. Copy the URL of your website and paste it in the “New item” box (click on “ADD AN ITEM” to get this)
  5. Add another item and paste your URL with “/*” at the end
  6. Press “Save” to restrict the APIs
HTTP Referrer
HTTP Referrer

How to Create and Restrict the Google Server API Key for the Store Locator?

To create the Google Server API Key, go to the project dashboard of Google Cloud Console and do the following:

  1. Click on “API Key” in “CREATE CREDENTIALS” to generate the “Google Server API Key”. Copy this key and paste it in the relevant section in “ASL setting” and press “Save Settings”
  1. On the “Restrict and rename API key” page, select “IP addresses (web servers, cron job, etc.)” option under “Application restriction”
  2. Copy the IP of your web server and paste it in the “New item” box (click on “ADD AN ITEM” to get this)
IP Referrer
IP Referrer
  1. Press “Save” to restrict the APIs
  2. Under the “Store Locator” plugin, go to “Import/Export Stores” and click on “Validate Key”
Validate the key
Validate the key

Congratulations, you have successfully created and restricted the APIs for your website. Thank you for reading this article, I hope it helped you in creating and restricting the Google Maps API Keys.