As of June 22, 2016, Google requires an API key to display maps on a website. Acquiring an API key is free and allows up to 25,000 requests per day.
There is a lot of technical jargon that may not make much sense, but don’t worry, you shouldn’t have a problem if you follow the steps below.
Get a Key
Start the process to get an API key through the Google Developers Console by clicking the button below (you may need to log in or create a Google account first).
Create a Project
If you haven’t created a project in the Google Developers Console before, you will need to do that first:
- Choose the Create a Project option in the dropdown
- Click the Continue button (you may need to agree to the terms before proceeding)
Create a browser API key
On the screen to create the browser API key:
- Use “AudioTheme” for the key name to help identify it in the future
- Leave the referrers field empty for now to make testing easier (be sure to enter your domain after verifying everything works to prevent anyone else from using your key)
- Click the Create button
- Copy the API key to enter it in your WordPress admin panel
Save the API Key
In your WordPress admin panel, save your API key so your site can access the Google Maps APIs.
- Go to AudioTheme → Settings
- Paste your API key in the API Key field in the Google Maps section
- Click the Save Changes button
If you didn’t copy your API key in the earlier step, you can find it on the Credentials screen in the Google Developers Console.
You should now be able to display maps on your site.
Secure Your API Key
Your API Key grants you access to the various Google Maps APIs and identifies requests from your sites. It is publicly visible to anyone viewing the source of your site and could potentially be used by someone else, so it’s important to make sure you identify sites where it will be used.
In most cases, the worst that could happen is that your limit might be exhausted, so maps on your site would stop being shown to your visitors, but if you’ve enabled billing you don’t want to incur extra charges.
After you’ve verified that your Google Maps API Key is working, you can limit it to your site by visiting the Credentials screen in the Google Developers Console and editing your API key. You may also want to enter any development and staging URLs so you can use the same API key everywhere.