The Google Maps API requires the usage of API keys. This enables Google to track your usage and contact you in case your usage exceeds the daily limits.
Browser API 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.
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.
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 > Google Maps APIs page.
- Google Maps Geocoding API
- Google Maps Directions API
- Google Maps Distance Matrix API
- Google Maps Elevation API
- Google Places API Web Service
The most common issues with both the server and browser API keys are caused by missing / incorrect referrers.
- The map is grey, or the start location field is broken on the settings page
If after setting the browser key you get a grey map on the front-end or a grey input field for the start location on the settings page, then there is 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.
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.
- 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 184.108.40.206 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