Create Google API Keys

The Google Maps Platform requires the usage of API keys and an active billing account.

Don’t forget to set the browser and server key referrer restrictions after creating the API keys. If you don’t do this, then you will likely up with a grey map or API errors when you try to create a new location.

Browser API Key

The browser API key is used when data is requested from the Google Maps JavaScript API. This happens when the map is loaded in the admin area or on the store locator page itself on the front-end.

Create Browser Key

The first screen you will see in the Google API Console allows you to choose between creating a new project, or using an existing one. Click ‘Continue’ after you have made a selection.

Google API Console

The next screen allows you set to a name for the browser key and restrict the usage of the browser key to the provided referrers. If you leave the referrer field empty, it’s possible for other users to use your key on their domains.

Browser API Key

Set the referrer to http(s)://* to cover all pages on your site, or ** if you’re using a subdomain.

Once you have set the referrer, click on the ‘Create’ button, copy the shown API key, and set it in the ‘Browser key’ field on the settings page in the ‘Google Maps API’ section.

Server API Key

The server key is used when a request is made to the Google Maps Geocoding API to convert an address into a set of coordinates. This happens when a new location is created in the admin area, or when a CSV file is imported and the coordinates are not included in the imported data.

Create Server Key.

On the first page, select the same project you used when you created the browser key and click ‘Continue’.

Google Server Key

On the next screen, set the referrer to the IP address of your server to restrict the usage of the key. If your server is using a dynamic IP, then contact your host and ask for the used IP range ( the range will have this structure ). Once you have have obtained the used IP range set it as the referrer for the server key.

Server API Key

Click on the ‘Create’ button, copy the shown API key, and set it in the ‘Server key’ field on the settings page in the ‘Google Maps API’ section.

Make sure to NOT set API restrictions for both keys, doing so will result in a ‘This API project is not authorized to use this API’ error in the browser console.


As of July 16, 2018, to continue the use of the Google Maps Platform APIs, you must enable billing on each of your projects.

You can read more about the pricing changes here.

Use an Existing Project In The Google API Console

If you have already created a project for your website in the Google API Console, make sure to enable the following Google Maps APIs on the Library > Maps > View All page.

  • JavaScript API
  • Geocoding API
  • Directions API
  • Distance Matrix API
  • Elevation API
  • Places API


The most common issues with both the server and browser API keys are caused by missing / incorrect referrers.

The referrer for the browser key should be set to the current domain ( http(s)://* or ** ), and for the server key it should be set to the IP address of the current domain.

Another common issue is that a grey map in combination with a broken start location field is shown on the settings page. This points to a problem with the used browser key. The only way to find out the exact problem is by checking the console output in your browser.

Start location error

Store locator map error

You can access the browser console in Firefox with ctrlshiftk, or ctrlshiftj in Chrome.

Once you have opened the browser console, reload the page and check for any errors that are related to Google Maps. The error itself usually includes a link explaining the reason for the error and how to fix it.

Browser console error

Common API Errors

Google points out in the API Console that it may take up to 5 minutes before changes are processed, but this in some cases never seems to happen. So if your sure you have correctly configured the API keys, but keep seeing errors, then try to delete the current API keys and create a new browser and server key.

API limit reached & For development purposes only

If you get an ‘API limit reached’ error when you load the page, or it shows up in the browser console, then you probably didn’t enable billing in the Google API Console. This is required by Google as of July 16, 2018.

Not having enabled billing also results in a ‘For development purposes only’ text showing up on Google Maps itself.

For development purposes only

If you have enabled billing but keep seeing this error, then you can contact Google Billing and Payments Support.

Incorrect IP for the server key referrer

If you have set the incorrect IP for the server key referrer, then it will say so when you try to create a new location.

Incorrect server key IP

The IP it expects for the referrer is included in the returned error. In the above example the is the value that should have been used for the server key referrer. The IP shown on your site will be different.

API keys with referer restrictions cannot be used with this API

When you set the referrer for the server key to the domain name instead of the IP address, then it will show this message.

API key restrictions

To fix this change the restriction from ‘HTTP referrers’ to ‘IP Address’ for the server key.

This API project was not found. This API project may have been deleted

Missing API project

This shows up when the project the API keys belonged to is no longer available in the Google API Console. To fix this create a new project and use the provided keys instead.

The provided API key is invalid

You can fix this by making sure you have correctly copied the API keys from the Google API Console to the API key fields on the settings page.

Invalid API Key

The provided API key is expired

This error can show up when the created API key hasn’t been completely processed by Google. The error will often go away by waiting a few minutes before saving it again on the settings page.

API key expired

This API project is not authorized to use this API

This error means that API restrictions are set in the Google API Console for the used API keys.

You can check this by going to the Google API Console, click on ‘Credentials’ on the left hand side and then click on the API keys.

Look for the ‘Key restrictions’ section and make sure the ‘API restrictions’ are set to none.

Google API key restrictions.

If they are set, then click on the ‘API restrictions’ tab underneath it and remove the set restrictions. The API’s that should not have restrictions set on them are listed here.