Integrating your site with Google Maps API

If you want to display a Google map on your site, for example on your contact page, you need to generate an API key (a specific set of numbers and letters) using a Google account to ensure your map displays properly. This post explains how to obtain this API key and how to configure it so that it will work on your domain.

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.

The Google homepage has a sign-in link in the top right

From here you can login or create a new account.

You have the option to sign-in 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.

If your map used to work, but looks like this now, it’s probably because you don’t have any valid billing details in your account

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’.

3. Enable the Map Javascript API

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:

https://console.developers.google.com/apis/dashboard

This should log you into a screen that looks something like this:

Google API dashboard screen

Now click the button at the top center of the screen that says ‘Enable APIs and services’. It’s the next screen that really gives you an idea of all the services that Google provides. Luckily for us the maps services we want, the proper title of which is ‘Maps JavaScript API’, is usually right at the top of the screen.

Available Google API services – the service needs for Google maps is called ‘Maps JavaScript API’

Click this button and on the next screen click the big blue ‘Enable’ button.

Click the blue ‘Enable’ button to tell Google you want to use this service

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’.

Available Google API services – with ‘Places API’ highlighted
Available Google API services – with ‘Places API’ highlighted

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:

https://console.developers.google.com/apis/dashboard

Then click on the ‘Credentials’ link in the sidebar.

The Google API credentials screen

In the center of the screen click the “Create Credentials” button and choose “API Key” from the dropdown. It looks like this:

Create credentials – select API key from the dropdown

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:

The Google API key restrictions and settings 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.

Click save.

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.

Or if you are using a plugin, like the very popular WP Google Maps or Simple Google Maps Short Code you’ll find a plugin settings page where you should add the key.

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.

Billing details aren't verified.

Sometimes you need to take some extra steps to verify your billing details, especially if your Google account has been around a long time. Head back to your billing dashboard (look back at step 2 to help you) and check for any notifications telling you to verify your details.

You forgot to enable to Google Map API service.

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.

You haven't set up the site URL restrictions properly.

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.

Ask your questions

About the author

Hannah focuses on improving project management and business processes at Highrise. She is also a full-stack WordPress developer and teaches courses on how to code with WordPress in Bristol, her hometown. Hannah is a big fan of the WordPress community and you might bump into her at WordCamps or the Bristol WordPress meet-up.