- Browser API Key
- Server API Key
- Google Maps Billing
- Use an Existing Project In The Google Developers Console
Browser API Key
The first screen you will see in the Google Developers Console allows you to choose between creating a new project, or using an existing one. Click ‘Continue’ after you have made a selection.
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.
Set the referrer to http(s)://domain.com/* to cover all pages on your site, or *.domain.com/* 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.
On the first page, select the same project you used when you created the browser key and click ‘Continue’.
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 172.16.0.0/12 ). Once you have have obtained the used IP range set it as the referrer for the server 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.
You can read more about the pricing changes here.
Use an Existing Project In The Google Developers Console
The most common issues with both the server and browser API keys are caused by missing / incorrect referrers.
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.
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.
Common API Errors
- API limit reached & For development purposes only
- You have exceeded your daily request quota for this API
- Incorrect IP for the server key referrer
- API keys with referer restrictions cannot be used with this API
- This API project was not found. This API project may have been deleted
- The provided API key is invalid
- The provided API key is expired
- This API project is not authorized to use this API
- Missing Browser API key ( NoApiKeys )
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 Developers 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.
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 Developers Console, or there’s a problem with the billing account itself.
If you don’t have a billing account, then you can create one by following this link.
If you have enabled billing but keep seeing this error, then you can contact Google Billing and Payments Support
You can read more about the Google Maps API price changes here.
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.
The IP it expects for the referrer is included in the returned error. In the above example the 18.104.22.168 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.
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
The provided API key is invalid
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.
This API project is not authorized to use this API
This error means that API restrictions are set in the Google Developers Console for the used API keys.
You can check this by going to the Google Develops 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.
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.
Missing Browser API Key ( NoApiKeys )
If no browser key is set, then this section describes how 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 ) and search for ‘https://maps.google.com/maps/api/js’ to see if key=xxxx is included. If this is not the case, then first look for any security / optimization plugins that are active on your server.
If this is the case, then look for an option that might be responsible for the removal of script parameters and disable it, or try to disable all plugins just to see if a plugin is causing this issue in the first place. If not, then for a second switch back to a default WP theme to see if there’s code in your theme that’s responsible for removing the ‘key=’ parameter.
If it’s not a plugin / theme issue, then it’s likely a script from your host that removed it. The only way to confirm, and solve this is by contacting support from your host and ask them about it.