Create Google API Keys

The Google Maps Platform operates on a flexible, pay-as-you-go model. While a valid billing account and API key are required to activate the service, Google provides generous free monthly usage limits for each individual API category. You will not be charged anything unless your website traffic exceeds these free caps. You can review the exact breakdown of free limits and per-request costs on the official Google Maps Core Services Pricing List.

Generate API Keys

Before you can use Google Maps in the WP Store Locator plugin, you will need to create two API keys.

  • The browser 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.
  • 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.
To prevent any confusion, the generated API keys in the Google Cloud Console will initially be labeled as ‘API Key 1’ and ‘API Key 2’, and not ‘browser key’ or ‘server key’ ( as used on the plugins settings page ). Only after you rename them on your credentials page ( if you wish to do so ) will they show up like that.

Get API Key

  1. If you don’t have an active account on the Google Cloud Platform, then the first screen will collect the required details for your billing account. This setup is required to access Google’s free monthly usage tiers, which are more than sufficient for normal website usage.

    If you already have an active billing account, then you will be asked to provide a name for your new project.

  2. After this you will be taken to the next screen where you see a generated API key. The easiest option here is to keep the ‘Enable all Google Maps APIs for this project’ box checked, but if you only want to enable the ones required for the WP Store Locator plugin, then you have to manually enable the APIs listed here.

    Copy the shown api key, and set it in the ‘Browser key’ field on the settings page in the ‘Google Maps API’ section.

    Because we will use this api key for the front-end, we will need to set the application restrictions in the next screen to HTTP referrers.

    The referrer value should be set to the domain you plan to use the plugin on. So if your website runs on xyz.com, then you should set the referrer value to xyz.com/*, or if there’s a subdomain to *.xyz.com/*. Click on ‘restrict key’ when your done.

  3. Next we will create an additional api key that will be used as the server key. In the menu bar click on ‘create credentials’ and select ‘API key’.

    This will show you the key that will be your server api key. Copy the key, and set it in the ‘Server key’ field on the settings page in the ‘Google Maps API’ section.

    To prevent unauthorized usage we will also restrict it to the IP address of your server. You can do this by clicking on the ‘Edit API key’ text shown in the window.

  4. On the next screen, set the application restriction to ‘IP addresses’ and click on ‘add an item’.

    Set the value of the shown field to the IP address of your server. 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 172.16.0.0/12 ). Once you have have obtained the used IP range set it as the restriction for the server key.

Make sure your API keys are restricted correctly. If you restrict an API key to a specific service but forget to include one of the required APIs listed below, it will result in a ‘This API project is not authorized to use this API’ error in your browser console.

If any of the above is unclear, then please follow the video tutorial from the Google Maps Platform team below.

Validate the API Keys

After you have saved the browser and server keys on the WPSL settings page, click on show response to make sure there are no configuration errors.

If any errors show up, then make sure to check the troubleshooting section.

Use an Existing Project In The Google Cloud Console

If you have already created a project for your website in the Google Cloud Console, then make sure to enable the following Google Maps APIs.

Troubleshooting

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

The application restriction for the browser key should be set to HTTP referrers pointing to your domain ( http(s)://domain.com/* or *.domain.com/* ), and the server key should use IP address restrictions set to your web server’s IP address.

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 your favorite browser with F12.

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 Cloud Console that it may take up to 5 minutes before changes are processed. If you are sure you have correctly configured the API keys but keep seeing errors, try deleting the current API keys and creating a fresh browser and server key pair.

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 Cloud Console. This is required by Google to use their mapping APIs.

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.

You have exceeded your daily request quota for this API

This error shows up when there’s either no billing account linked to the project that holds the API keys in the Google Cloud Console, or there’s a problem with the billing account itself.

If you don’t have a billing account linked, you can create or assign one by following this link.

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 restriction

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

Incorrect server key IP

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

API keys with referer restrictions cannot be used with this API

When you set the restriction for the server key to an HTTP referrer (domain name) instead of an IP address, then it will show this message because server-side requests (like Geocoding) do not pass browser referrer headers.

API key restrictions

To fix this, change the restriction type from ‘HTTP referrers’ to ‘IP addresses’ for your 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 Cloud Console. To fix this, create a new project and map your new keys into the plugin.

The provided API key is invalid

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

Invalid API Key

The provided API key is expired

This error can show up when a newly created API key hasn’t been completely processed by Google yet. 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 turned on in the Google Cloud Console for this key, but you haven’t authorized the specific API you are trying to call.

To fix this, go to your Google Cloud Console, click on ‘Credentials’ on the left-hand side, and click on the API key that is failing.

Look for the **API restrictions** section near the bottom. If ‘Restrict key’ is selected, make sure you use the dropdown menu to check the boxes next to all the necessary mapping APIs required for WP Store Locator (such as the Maps JavaScript API and Geocoding API). Save your changes.

Google API key restrictions

Missing Browser API Key ( NoApiKeys )

The NoApiKeys error shows up in the browser console when no browser key is set on the settings page, or there’s code active on your server that aggressively strips URL query parameters from loaded JavaScripts.

If no browser key is set, follow the steps above to generate one.

You can check if the key parameter is missing from the Google Maps script by opening the HTML source on the store locator page (CTRL + U or CMD + Option + U on Mac) and searching for ‘maps.googleapis.com/maps/api/js’ to see if `key=xxxx` is included. If it’s missing, investigate your optimization/caching plugins, or reach out to your web host to see if a global script filter is stripping out query arguments.

If none of the above helps to resolve your Google Maps issues, you can open a official help ticket directly with Google Maps Platform Support.