When first working with Google APIs to display a Google map on your site, it can be a daunting and tricky task to find out how to obtain the correct key and set everything up correctly.
Not only that, Google made some significant changes to the process of generating them in June 2018. If a year or so ago, you had wrapped your head around how to do this, it’s all gone and changed! Whilst we are a fan of Google services, we are not madly keen on their documentation for this process. This post will guide you step by step through the process.
Step 1. Set up a Google account
The first thing you need a Google account. It’s likely you’ve already set up a Google account along the way (or several if you are me!). You may have a Gmail email account or an analytics account. If you don’t, it’s easy and quick to set up – all you need is an email address to get started.
To create an account, visit google.com and click the ‘Sign in’ button. Even if you don’t have an account yet this is the right first step.
From here you can login or create a new account.
2. Add billing details to your Google account
One of the key changes that came about in June 2018 is that Google now requires you to add billing details to your account in order to make use of their services. If your Google map used to display ok, but now doesn’t and looks like the below, it’s probably because you need to go in and add some valid billing details.
By adding billing details, am I going to have to pay anything?
If you are simply adding (technical term: embedding) a Google map to your site with maybe a marker, for example on a contact page to show where your business is located, Google does not charge for this. So the good news, is it free and you won’t have to pay anything. You have an unlimited number of times your site can load a Google map. You can read more about this on the Google pricing page in the embeds section.
On top of that, Google also gives each customer $200 of credit each month. These credits will be used if you are using some of the more advanced functionality that Google maps provides. There’s more info on Google’s pricing for maps, routes and places page.
Ok it’s free, now how do I add my billing details?
To add your billing details, make sure you are logged in the right Google account (check the top right of your screen) and visit this page: https://console.cloud.google.com/billing. If you get any errors, or it says you don’t have sufficient priviledges, make sure you are logged out of any other Google accounts to avoid confusion.
In the centre of the screen, click on ‘Add billing account. Fill in the country, tick whether you want to receive updates or not and then accept the T&Cs. Click the blue ‘Agree and continue’ button. Enter the appropriate billing details and click ‘Start my free trial’.
You might have noticed, but Google offers tons of services. The next step is to tell Google which of it’s umpteen services you’d like to use.
Making sure you are still logged into your Google account, you next need to visit the API console in order to get started. You can do this by click on the following link:
This should log you into a screen that looks something like this:
Click this button and on the next screen click the big blue ‘Enable’ button.
4. Enable the Places API
You might also have to enable the ‘Places API’ to solve common problems like the “This page can’t load Google Maps correctly” in ACF.
To do so, follow the instructions in step 3, but this time search for the ‘Places API’.
Click the ‘Places API’ tile (highlighted in the image above) and then enable the API on the following screen.
5. Get your Google maps API key
At this point, I usually spend ages looking through the Google screens trying to find an obvious menu option to complete this last step. I usually fail, so I think the easiest thing to do is just visit this link directly:
Then click on the ‘Credentials’ link in the sidebar.
In the center of the screen click the “Create Credentials” button and choose “API Key” from the dropdown. It looks like this:
A popup should appear with your API key included. Copy this for now so you have access to it. It will be a long jumble of letters (lowercase and uppercase), numbers and some punctuation marks.
The next step is to restrict your key so that it can only be used on your own domains – the website you want to integrate Google maps on – and not potentially by any site should somebody get their hands on your API key. It’s a little step of extra security that’s good practice.
In the popup window that shows you your API key, in the bottom right corner click the “Restrict Key” link. You’ll see the following screen:
From here you can give you key a name, so it is more meaningful to you e.g. “My Website Google API Key”. This is really helpful if you have a number of keys you need to manage.
Now add restrictions to your eky. Under the heading “Application Restrictions” choose “HTTP Referrers”. A text box should appear where you can add the websites where you want the key to be used and thus Google maps to be displayed.
I usually add two version of my site’s url, a version that begins with www. and a version without, e.g. ‘https://highrise.digital/*‘ and ‘https://www.highrise.digital/*‘. If your site is not secure your URL may begin with ‘http://highrise.digital‘ instead.
6. Add your API to your WordPress site
The final part is to add your API key to your WordPress site. Now at this point it’s really hard for me to say exactly where you will do this as it depends on the exact set-up of your site.
It might be that your theme has the option to add your key. A lot of premium or custom built themes, like the kind of one-off themes we make, have the ability to display Google Maps baked in. You will usually find an input box for the API key in the main theme settings or site options page.
Once you’ve added the key to your site, check your contact page (or other page where you are displaying a map) and see if it’s working. It usually takes a few minutes for the Google API key stuff from steps 3 and 4 to take affect. So if it’s not working straight away I make myself a cup of tea and by then it’s usually got itself sorted. If not, have a look below at some of the common troubleshooting problems.
Common bits where things go wrong
We’ve tried to be as thorough as possible in these instructions, but we’re all human and sometimes we miss a step or get things wrong. Here’s a few of the most common stumbling blocks.
Step 3 is easily overlooked. Make sure you have told Google that this is the service you want to use, especially if you have an older Google account.
In step 4 you needed to add restrictions to your API key. This is the most common part where things go wrong, as in fairness it’s tricky!
Make sure that your URLs end with a /* eg ‘ https://highrise.digital/* ‘.
The /* is a wildcard symbol and tells Google that any page following on from your main is acceptable. So ‘https://highrise.digital/contact’, ‘https://highrise.digital/about’, ‘https://highrise.digital/work’ would all be accepted and any other slug you can think of, if you added /* to the end of your URL.
Also remember that any changes you make can take up to five minutes to take affect. So you might end up brewing a few cups of tea or munching a few biscuits whilst you wait around. Patience pays with these things!
Can we help?
If you have any questions on how to maintain your WordPress site, or would like to discuss how we could help you, please get in touch.