How to create an API key for Google Maps?

Johan Vantomme
Johan Vantomme
Mar 18, 2020 1:54:15 PM

HubSpot HubSpot Modules

SHARE

To integrate Google Maps on your website with our Google Maps Locator module, you need an API key. This is a unique ID used to verify requests associated with your project so that Google gets a view on the usage and can bill you accordingly. Fortunately, creating such an ID doesn't take much effort.

What is the API key used for?

The use of the Google Maps API is usually paid, but in practice, it doesn't always cost you money. Google automatically allocates 200 US dollars per billing account monthly. This means that you don't pay anything as long as you generate less than 25,000 hits per day. If your needs are higher, Google will charge you for this.

Here you get a detailed overview of the rates for the Google Maps API.

Creating a Google Maps API key

Creating your API key for the Google Maps JavaScript API is just a few steps:

1. Create an API key

Either create an API key via the Google Maps Platform website or use the Google Cloud Platform console:

Google Cloud Platform console:

  • Go to the Google Cloud Platform Console.
  • Search and select your project using the drop-down menu at the top of the screen or create a new project for which you want to add an API key.
  • Click on the button from the navigation menu at the top left and select APIs & Services > Credentials.
  • On the Credentials page, choose Create credentials > API key.
  • In the dialog screen, you will now see your freshly created API key.
  • Now click on Close.

Google Maps Platform website:
(it seems that Google Maps Platform is sunsetted by Google and integrated Google Cloud)

  • Visit the Google Maps Platform website.
  • Click on Getting Started.
  • Check the box next to Google Maps.
  • Select your project from the list in the drop-down menu or create a new project.
  • Link your project to an existing billing account or create a new one.
  • Copy your API key that appears on the screen.

Your new API key is available on the Credentials page under the header API keys. Keep in mind that you first have to restrict this key before you can use it in a production environment.

2. Add the API key to your request

Every request to the Google Maps API must contain an API key. In the example below, replace YOUR_API_KEY with your own API key.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

If you are using our 

3. Put restrictions on your API key

By imposing restrictions on your API key, you provide extra security and ensure that only authorized requests are made using your API key.

  • Go to the Google Cloud Platform Console.
  • Click on the project drop-down list and select the project whose API key you want to secure.
  • Click on the menu button and select APIs and services > References.
  • On this page, click on the name of the API key you want to secure.
  • Choose Restrict and rename the restrictions in both types of constraints:
    • Application restriction: this ensures that an API key is only valid for websites (http), web servers (IP) or apps (Android or iOS). You can only select one restriction from this category, based on the platform of the API or SDK. By creating and restricting multiple keys, you can work around that restriction.
      • Select HTTP referrers (websites)
      • Add the referrers.
    • API restriction: this ensures that only (one or more) APIs or SDKs of your choice can use an API key. Requests for an unlinked API or SDK to the key will fail.
      • Select Restrict key.
      • Click Select APIs and select Maps JavaScript API. If the Maps JavaScript API is not listed, you will need to enable it first.
      • Click SAVE.

It is recommended that you set both available restrictions before using an API key.

For more information, you can also visit Google's documentation page

Our custom HubSpot Store locator module

With such an API, you can integrate Google Maps on your HubSpot website. We have developed a custom module that allows you to display multiple locations on your HubSpot road pages:

Store locator on Google Maps

Buy this HubSpot module on the marketplace »
To the documentation of this module »

Johan Vantomme

Johan Vantomme

Johan is one of the founders of leadstreet, Diamond HubSpot Partner. HubSpot certified on 5 levels. He knows how to link technical knowledge for developing websites to a large knowledge of online and the associated commercial and marketing side. Johan is a (former) sailing fanatic and a foodie.