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?
Application Programming Interface (APIs) allow communication between two different platforms, where the key verifies the identity of the project where the requests come from. The Google Maps API also requires such an API key, which connects to your billing data.
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.
- 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.
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:
Buy this HubSpot module on the marketplace »
To the documentation of this module »
