Setting up a Google Maps API Key for Your Website

To embed a Google Map in to your website you will need to create and use an API key that you can set up via the Google Cloud Platform.

An example showing an embedded Google Map which requires the use of the API key would be on the Contact page of this website.

This guide will focus on generating your Google Maps API Key. Once you have your key, it will need to be used within the website. How this is used will be dependent on your setup. For example if you are using a WordPress page builder (such as Divi or Elementor) they will have an area where you can enter this key. If you have a custom built website via a developer or agency then you may need to provide this key to them for implementation.

Why do I need a Google Maps API Key?

The Google Maps API key is required so that your website or application can use the Google Maps service. This could be for displaying a simple map showing your location, or using related services such as providing driving directions. We will just be focusing on the service for embedding a simple map here.

Your usage of the service(s) will be enabled and tracked via your key.

Without a key, your map will appear similarly to the following:

What do I need to set up a Google Maps API Key?

To set up your key, you will need:

• Google Account
  Your Google Account will be used to generate the key, and the usage is linked to that.
  
• Payment Method
  You will need to have an active payment method linked to the account otherwise the key will not work. This was not always a requirement, but a reason for this includes to prevent over-use of the service. Google will provide you so many credits per month (currently $200) that can be used for the Maps service. For the majority of users who may just want a simple map on their contact page, these credits would be enough and payment wouldn’t be triggered, but if your project uses any of the mapping services throughout then it would be worth being more mindful of the usage costs.

More information on the current charges can be found at:
https://developers.google.com/maps/documentation/javascript/usage-and-billing
https://developers.google.com/maps/billing-credits

Steps for Setting up your Google Maps API Key

1. Sign up to the Google Cloud Platform

Sign up to the Google Cloud Platform using your Google Account by clicking here.

2. Create a project in the Google Cloud Platform

Using your Google Account, sign in to the Google Cloud Platform at:

https://console.cloud.google.com/projectcreate

This should take you to create a new project that you will link to API key to.

Enter a Project name that you can use to identify the project for your own reference and click the Create button.

3. Create a billing account which will be linked to the project

Once your project has been created you will need to make sure that a Billing Account has been enabled for your account and linked to the project.

Make sure that your newly created project has been selected and open the menu by clicking the hamburger icon in the top left of the window to select the Billing section, as shown in the screenshot below:

In the background of the screenshot above, you can see that no billing account has been linked to the project. If you already have a billing account set up you can link it using the Link Billing Account button, or create a new billing account using the Manage Billing Accounts button. Either option should let you create a new Billing account.

Follow the steps to add your payment details. The final step may describe starting a free trial. This is in relation to all of the Google Cloud Platform services which aren’t required for the purpose of this guide, but the trial will be triggered through this process regardless.

You may be presented with a Welcome screen for the platform in general at this point.

It would be a good idea to go back to the main Billing section in the platform to make sure that the billing account has been linked. This may not always be the case if you are setting up a new billing account. Navigate back to ‘Billing‘ in the main menu, and if it hasn’t been linked to the project you should be able to click ‘Link Billing Account‘ and select the newly created Billing Account.

From here, we should be in a place where we can set up the Google Maps API key.

4. Creating your Google Maps API Key

After setting up your Project and Services, open the menu from the top right hamburger icon and navigate to API & Services > Dashboard (or go to https://console.cloud.google.com/apis/dashboard).

If following the link above, make sure that the correct project is still selected in the top bar. From here, click the link ‘+ Enable APIs and Services‘. The selected project and enable link is highlighted in a red box below:

You should now be on the Welcome API Library page that lets you search for the APIs to enable. The service which we want to enable is:

Maps JavaScript API

It is usually on the first page of services, but you can also search for it.

Click on the Maps JavaScript API tile and then on the detail page for this, click the button to Enable the API within your project.

After enabling the service, go back to the main menu in the top left and navigate to APIs & Services > Credentials (or go to https://console.cloud.google.com/project/_/apiui/credential). Here we will create the API key.

If following the above link, make sure to select the correct project (if you have multiple projects in your account).

From this page, click on the ‘+ Create Credentials‘ link towards the top middle of the page, and then select ‘API Key‘.

You should now be presented with your API key. Note this down as it can now be used in your website.

5. Restricting your Key

At this point, you should have a key that you can use, but it won’t be restricted. This means that the key will be available for use across all of your enabled services and APIs. In this case, we have only enabled the Maps JavaScript API so this point may not be as relevant, but if you ended up enabling more services it would be a good idea to restrict which keys have access to certain services. This would be from a security and management of keys point of view.

Also, anyone that has the key could use it within their own websites. This would not be desirable as it would start using your own credits and you would potentially end up being billed for any further usage. It is the main reason why we would be restricting the key in this guide.

After creating your key, it should show a popup, giving you the option to ‘Restrict key‘. Click on this, or click on the key that was created from the APIs & Services > Credentials page to edit it.

You will end up on a page similar to the following:

The following fields in the example above have been set:

• Name
  You can change this to something that would be easier to identify the key by. This could be the name of your website followed by ‘Maps API Key’ as this is what the key is being used for here
• Application restrictions
  Since we only want the key to work on our own domain, to restrict it in this way, select ‘HTTP referrers (websites)‘
• Website restrictions
  When selecting ‘HTTP referrers (websites)’, this section will show. Enter the domains of your website here. In the example above, there are two entries. In most cases, you can follow with the same as shown, but replace ‘mywebsite.com’ with the domain of your website. The asterisk (*) acts as a wildcard:
  • *.mywebsite.com/*
    This allows any subdomain and then any path after the domain (i.e. www.mywebsite.com/contact)
  • mywebsite.com/*
    This allows the main domain and then any path after the domain (i.e. mywebsite.com/contact)
• API restrictions
  You can restrict the key to only allow the use of the Maps JavaScript API here by selecting the ‘Restrict key‘ option and then the ‘Maps JavaScript API‘ from the dropdown

Save any changes that you make, noting that as stated in the page it may take up to 5 minutes before the changes are reflected.

After making these updates, you should be able to use your key solely on your specified domain(s).

Further Reading

For further, more detailed information and instructions, see:

https://developers.google.com/maps/documentation/javascript/get-api-key

https://developers.google.com/maps/gmp-get-started#enable-api-sdk