HostSEO Blog

Stories and News from IT Industry, Reviews & Tips | Technology Blog


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

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.

Subscribe Now

10,000 successful online businessmen like to have our content directly delivered to their inbox. Subscribe to our newsletter!

Archive Calendar

SatSunMonTueWedThuFri
 123456
78910111213
14151617181920
21222324252627
28293031 

Born in 2004 ... Trusted By Clients n' Experts

SEO Stars

They never made me feel silly for asking questions. Help me understand how to attract more people and improve my search engine ranking.

Read More

Emily Schneller Manager at Sabre Inc
SEO Stars

Took advantage of Hostseo's superb tech support and I must say, it is a very perfect one. It is very fast, servers reliability is incredible.

Read More

Leena Mäkinen Creative producer
SEO Stars

We're operating a worldwide network of servers with high quality standards requirements, we’ve choose hostseo to be our perfect partner.

Read More

Ziff Davis CEO at Mashable
SEO Stars

It’s very comfortable to know I can rely about all technical issues on Hostseo and mostly that my website and emails are safe and secured here.

Read More

Isaac H. Entrepreneur
SEO Stars

With hostseo as a hosting partner we are more flexible and save money due to the better packages with great pricing, free SEO n' free SSL too!

Read More

Madeline E. Internet Professional