Before you can begin using the Google Maps feature, you’ll need to create a free API key from Google. This allows Google to recognize your website and display a map. It’s simple to setup. Just follow the steps below.
Create a New Project
- Click on the “Get a Key” button and you’ll see a window like this
- Select an existing project or create a new one
- If it’s a new project, give it a unique name
Your New API Key
Next, click on the “Go to Console” button so we can verify the APIs we require are active and restrict usage to only your website.
Verify APIs are Enabled
In order for your API key to work with our themes, you need to make sure the following APIs are enabled. By default, they should already be enabled so this step is just to double-check.
- Google Maps Geocoding API
- Google Places API Web Service
- Google Maps Directions API
If any of the above APIs are NOT listed, you’ll need to manually enable them. Just click on the “Enable API” link at the top of your dashboard.
Add Your API Key
Login to your website and navigate to the Google Maps API key field. You’ll want to enter it and save. Your website should now display maps and geocode addresses correctly (assuming you enabled all required APIs listed above).
Note: the API key field location will vary depending on which theme and version you are using. In most cases, you’ll find it under the “Geo Services” => “Map – Google” section. In Vantage 4.0+, it is located under “Settings” => “Maps”.
If you have ClassiPress and don’t see the API key field, make sure to upgrade to the latest version (3.5.6 or greater).
Restrict API Key Access
This step is optional but recommended.
Since you’ve confirmed your new API works, it’s time to improve security and lock down usage to only your website.
- Click on the “Credentials” link in the sidebar
- Find your new API key and click on the pencil edit icon
- Give your key a name. Typically, the name of your website works best
- Set the key restriction to “HTTP referrers (web sites)
- Enter your website url. Use the following format:
*.mywebsite.com/*The asterisk is a wildcard so sub-domains will be included
- Click the blue “Save” button
You’ve now whitelisted your domain name(s) and limited requests to only http referrers. This prevents quota theft of your precious daily API request limit (2,500).
Note: If you are presented with “You Don’t Have Permission to Create an API Key“, see the Common Issues section below.
If you weren’t able to get through the steps above, these issues may be able to help.
You Don’t Have Permission to Create an API Key
When trying to setup an API key, you may receive this message. It means exactly what it says.
You’ll need to create new credentials before an API key can be generated.
- Click on the “Credentials” link in the lefthand sidebar
- Click the “Create credentials” button
- Select the “API Key” option
- Then click the “Browser key” button from the pop-up
Now you’ll be taken back to the create a browser key step above and can proceed.
Missing API Key Error
If you see the following message, it most likely means you don’t have an API key setup with your theme. Follow the steps above to create and add your API key to your theme.
If you did follow the steps above and it’s still not working, read on.
- It may take up to 5 minutes for your new API key to take effect.
- Confirm you copied and pasted the entire API key into your theme options. The first or last characters can sometimes be cutoff by mistake.
- Make sure your domain name matches the one you registered with the API key. A slight misspelling or different domain name extension will prevent maps from working (e.g. www.test.co vs www.test.co.uk).
- Make sure you enabled the Maps API under the same project that you generated your API key. Each project allows you to enable/disable APIs.
Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.