Integrating your site with Google Maps API

When working with Google maps, you must always interact with their API which means your application, or website will need an API key. This post looks at how to obtain your Google maps API key so that it will work on your domain.

If your site has some sort of integration with Google Maps, changes made to the Google maps API recently mean that all requests to use Google maps need to have their own API key. When first working with the new APIs it can be a daunting and tricky task to find out where and how to obtain and API key. This post will hopefully guide you through the process.

The first thing to note here is that you need a google account. It is likely that most have a Google account setup already, probably through a Gmail email account or through an analytics account. If you have not got a Google account set, this should be your first step. All you need is an email address to get started, or you could even create a Gmail account at the same time if you wanted. You can create a Google account here.

Making sure you are 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:

From this screen, you should notice a small key symbol on the left hand side. Once you hover over this, it expands to say “Credentials”. Click this link and you should be taken to a screen with a blue button which says “Create Credentials”. Click this and then 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.

The next step is to restrict you key so that it can only be used on your own domains – the website you want to integrate Google maps on. In the popup window click the “Restrict Key” link in the bottom right corner.

The following screen should then appear.

From here you can give you key a name, so it is more meaningful to you e.g. “My Website Google API Key” and add restrictions to its use. 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.

Click save and then you are done.

About the author

Mark is the lead WordPress developer at Highrise Digital. He has been working with WordPress for over 13 years, way back to 2005. He focuses on back-end development, integrating the website build with WordPress so it can be editable.