How to create and use Google Maps Platform API key for Website Builder

cPanel Software Management
Jun 18, 2020
Updated Sep 18, 2022
2,603 views
Aelswith E.

Creating and configuring the Google Maps Platform API key
Pre-requisites
Enabling the set of APIse
Generating the API key
Restricting the API key (Optional)
Adding the API key to Website Builder

Due to the logic of how Google Maps is embedded on the website, an API key is a mandatory part of the map setup. We will cover the basic steps on setting up Maps JavaScript API and illustrate its usage within our Website Builder tool.

Creating and configuring the Google Maps Platform API key

Pre-requisites

Before you start using the Maps JavaScript API, you will need the following:

Google Maps Platform billing account
Google Maps Platform project

If you havenâ$™t configured Google Maps Platform yet, feel free to refer to the first steps of the Quickstart guide in order to set up the project and assign a billing account to it.

NOTE: You will still be able to create the API key without the billing account being assigned to the project, but this key will not allow you to embed Google Maps on your website; the error message shown is â$œYou must enable Billing on the Google Cloud Projectâ$ in the Browser Console. Thatâ$™s why itâ$™s better to take care of it beforehand.

In our example, we will use the Google Cloud Platform project My website project with the billing account already attached to it.

Enabling the set of APIs

Before generating the key itself, we will make sure that the required set of APIs is enabled for My website project. The following APIs should be enabled in the case of the Maps module of the Website Builder:

NOTE: Your script or website module may require other APIs to be enabled. We suggest double-checking this with the official documentation of the corresponding module.

After enabling the required set of APIs for the project, the list of Google Maps APIs will look similar to this:

Generating the API key

Once the required set of APIs is enabled, youâ$™re ready to generate the key. To get an API key:

1. Make sure that correct project is selected (in our case, My website project).
2. Proceed to APIs & Services >> the Credentials menu:

Click on + Create credentials >> the API key button:

The API key created window will display your newly-created API key:

At this point, the API key is ready to be used within the application. In our example, it is Website Builder and its â$œMapsâ$ feature. We recommend additionally restricting the use of the API key to a particular web project in order to prevent unauthorized use and quota theft.

Restricting the API key (Optional)

This feature provides additional security and makes sure that only authorized requests are made with your API key. There are two restrictions:

1) Application restriction

2) API restriction. We recommend enabling both of them.

1. Proceed to the Edit menu within the API key list:

2. Navigate to the Application restrictions section. Since HTTP referrers matches the expected website setup, we suggest proceeding with it and using the template .domain.tld/. The latter will allow any subdomain or path URLs in a single domain name to be eligible for API key usage.

NOTE: Make sure to change the domain.tld to the domain name of your website:

3. The API restrictions section is available within the same page. Restrict the key to the set of APIs selected earlier and click Save to apply the changes:

Adding the API key to Website Builder

Having an active API key will allow using the Google Maps Platform services within Website Builder.

1. Navigate to the page of your website which contains the map object and proceed to the Properties option:

2. Paste the API key in the corresponding field in the Properties window. Feel free to choose the address, apply other design tweaks to the map, and save the changes.

As soon as the website is published, the map will become available on the Internet. In our example, visitors would see the Phoenix Sky Harbor International Airport on the web page Contacts:

That’s it!

Need further help? Feel free to contact our 24/7 Live Chat.

Leave a Reply Cancel reply