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 cost can be found at:
Steps for Setting up your Google Maps API Key
1. Create a project in the Google Cloud Platform
Using your Google Account, sign in to the Google Cloud Platform at:
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.
2. 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.
3. 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:
It is usually on the first page of services, but you can also search for it.
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.
4. Restricting your Key
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:
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:
This allows any subdomain and then any path after the domain (i.e. www.mywebsite.com/contact)
This allows the main domain and then any path after the domain (i.e. mywebsite.com/contact)
- API restrictions
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).
For further, more detailed information and instructions, see: