Since you’re here, we’re guessing you already know you need a Google Maps API key for your WordPress website.
Perhaps it’s something you’ve been intending to sort for a while. Or maybe your WordPress website developer has mentioned it to you. But what exactly is it? And why do you need it?
Let’s unpick the jargon and start with the basics:
Everything you need to know about Google Maps API Keys for WordPress websites
A Google Maps API (Application Programming Interface) key is a piece of code that allows you to add Google Maps to your site. This means your visitors can, for example, see your location on your Contact page or find their nearest branch with a store finder – because Google Maps is embedded in your WordPress website.
It’s handy because your user isn’t clicking away to go and check out a separate Google Maps tab (where they might get distracted and forget to come back to your site.)
Why do you need a Google Maps API key for a WordPress website?
WordPress websites often use Google Maps to provide location-based features for their users. For example, displaying a map, showing store locations, or giving directions.
The most common Google Maps Platform APIs used by WordPress are Maps JavaScript API, Places API, and Directions API. But there are others, too – take a look at the full list of plugins available when Google Maps and WordPress get together.
You can add a map to a new or existing WordPress page, create custom markers, add overlays or mark out delivery areas for your user.
What do you need to consider before adding a Google Maps API Key to your WordPress website?
Now you know the great features that Google Maps can bring to your website, you’ll be keen to add the API Key right away. But there are some things you need to consider first:
An active Gmail account
Do you have an active Gmail account? This is required for anyone requesting an API key for Google Maps.
Quota and potential costs
It’s important to know that adding Google Maps to your site may come with a charge.
Firstly, if you need advanced features, you might need to pay for a plugin rather than using the free version.
And secondly, you might need to pay a fee to Google, too – depending on your usage. Since each API key is unique, Google knows where the request has come from, and can bill your account accordingly.
Fortunately, Google Maps currently gives users up to $200 of usage every month for free – it’s the equivalent of 28,500 map loads by your users. For many businesses, this is plenty. But if you think you might exceed this usage, it’s worth checking out the Google Maps Platform pricing to understand the potential costs.
Sensitive data – how to handle it
Google recommends restricting your API key usage, and make sure you delete any unused APIs – this is to prevent unauthorised usage and to protect your business.
And to protect your users, any Google Maps Platform request that contains sensitive data must be made over HTTPS, or it’ll be rejected.
Step-by-step instructions to get a Google Maps API Key
Ready to get a Google Maps API key for your WordPress website? Here’s how.
- Head over to https://console.cloud.google.com/ and log in.
- Select the project that needs an API key.
- Find the menu button in the top-left corner of the page, and look for ‘APIs and Services’ – hover over this, and click on ‘Credentials’.
- Click ‘Create Credentials’ then ‘API key’. You’ll get a pop-up showing your new API key.
- Rename the API Key to something that’s relevant to your site using the edit button on the right-hand side.
- You can also use the edit button to restrict your API key. You can make amendments to this whenever you need to.
Need more guidance up to this point? Google has made a handy video on getting a Google Maps API Key to help you out.
Once you’ve got an API key, it’s important to keep it secure. To do this, follow Google’s advice on best practices, or get a WordPress web developer to take a look for you.
Now you’ve got a Google Maps API Key, it’s time to add it to your WordPress website. That’s something your WordPress developer can do for you, but if you’re doing it yourself, continue following these instructions:
- Log in to WordPress as an admin, and head to Memberships > Settings > Advanced Settings.
- Copy and paste your API key in the field marked “Google Maps API Key”.
- Next, click “Library” and search for “Google Maps Javascript API”.
- Click to enable.
- The site will redirect you to an overview of your Google Maps API key – click “APIs” in the navigation pane on the left.
- Click “Geocoding API”, and click to enable.
Simple, right? But if you’re having trouble, get in touch with a WordPress developer like Potion Web Studio – we can help you out.
Regenerating a key
Occasionally, you may need to regenerate your Google Maps API Key. This could be because it’s been compromised – you need to create a new key to keep your account safe from unauthorized use (and charges).
Regenerating a Google Maps API Key means you’re creating a new API key, with the same restrictions as its predecessor. The process is straightforward, but there are some pitfalls to be aware of before you start.
Make sure you know where and how the API key is used on your site. Once you regenerate it, you only have 24 hours to update any apps – they’ll need to start using the new key before the old one stops working.
That means if you haven’t done it properly, you may lose functionality.
- In the Google Maps Platform Credentials page, restrict your API key if possible
- Click “Regenerate key”
- Select “Replace key”
If you have any trouble moving across to the new key, don’t worry – it’s possible to go back to your previous key temporarily to put the problem right.
How to check your Google Maps API Key works
Once you’ve generated your Google Maps API key and added it to your WordPress website, make sure it’s working properly.
The most obvious way to check it is to head over to your website and see how it looks. If the Google Map you’ve embedded doesn’t look right – say, it’s greyed-out or watermarked with text reading ‘for development purposes only’ – then there’s likely to be a problem with your API key or your account.
If this happens, double check your API key’s correct, then head to the Google Maps Console Credentials page to check your billing information.
Let’s go through some other problems you might run across when using a Google Maps API key.
Common issues with setting up Google Maps API Keys on WordPress websites
When you see the message “API Key not found”, or other alerts such as NotLoadingAPIFromGoogleMapsError, TOSViolationMapError, UnauthorizedURLForClientIdMapError, these all mean there’s an issue with your API key or your account.
Don’t worry – Google Maps error messages aren’t as scary as they look, and Google has a troubleshooting guide to show you what to do about them. You might be able to sort them even if you’re not a WordPress developer.
API key not found
This probably means there’s an error in your code. Go back and check you’ve copied it correctly, and don’t replace “API_KEY” with anything else, like the name of your project – your site needs that exact phrase in the code to run properly.
NotLoadingAPIFromGoogleMapsError
There are a couple of different ways to load the Maps JavaScript API. Check you’ve used the most appropriate one for your site, and make sure it’s loaded from the right location.
TOSViolationMapError
This message means there’s an unresolved issue with compliance. Check your emails for notifications from Google Maps, and complete Google’s form to have the block removed.
UnauthorizedURLForClientIdMapError
A problem with your authorisation means your map isn’t loading properly. This could be because your API is invalid or has expired, or you may need to add the Maps JavaScript API to the list of authorized URLs. Go back and double check your API key in case you need to regenerate it, and update your authorized URL list to fix this problem.
Still having issues with your API key?
Now you’ve got the knowledge to sort out any problems, your Google Maps functionality should be running smoothly on your site. But if you get stuck or you don’t feel confident, call a WordPress developer like Potion Web Studio to give you a hand.
Setting up a Google Maps API Key is easy – when you know how. If you’ve followed all the steps in this article and you’re still having trouble, don’t worry, WordPress web developers like us are here to help.
Get in touch if you need an expert on the case, we’ll soon sort Google Maps for your WordPress website.