How to use Google Maps API keys on your Website

Published 19/12/2019

As of the 22nd June 2016, Google has required all users of their mapping tools to register for a valid API key (Application Programming Interface key). All this means is that Google gives you permission to send a request to their database to retrieve map information.

How do I get an API key?

In order to use the system, you will have to have a Google account. If you have a login for Gmail or YouTube, you already have a Google account. If you don’t have one, or are not sure, follow this link to check, or set one up:
https://support.google.com/accounts/answer/27441?hl=en

The Google mapping service is free, but you must have a payment card associated with your account. To check, login to your Google account and click this link to go to the payment method page:
https://pay.google.com/payments/u/0/home#paymentMethods

Once you have completed these steps, follow this link to get your API keys:
https://console.cloud.google.com/cloud-resource-manager

Once you have opened the Google Cloud Resource Manager, click on the blue CREATE PROJECT link.
create project

Think of something suitable to call your map API key and click the CREATE button.
create new project

Next click on the navigation icon in the top left of the page.
navigation

Click on APIs & Services to open the Dashboard.
api services

Once in the Dashboard, click on ENABLE APIS AND SERVICES.
enable apis and services

This should take you to the page below. Click on ‘Google Maps JavaScript API’.
api library

You will be taken to the page below. Click the blue ENABLE button.
enable javascript api

You should now find yourself back on this page. Now click on the CREDENTIALS tab.
credentials tab

Next click ‘Credentials in APIs & Services.
credentials in api

Click the blue ‘Create credentials’ button and select API key.
create credentials api

And, after all that, here is your API key! Next click RESTRICT KEY.
api created

We need to stop others using your key. We do this by specifying which website will use it on this page.
key restrictions

Click the ‘HTTP referrers (web sites)’ radio button, then click ‘ADD AN ITEM’ to specify your website address.
key restrictions web

Type your website address into the ‘Referrer’ box. The given example is:

https://*.example.com/*

The stars represent ‘wild cards’ and can have any value. So the first star allows you to use subdomains, and the second star allows any directories and pages on your site to use the API key. So regardless of where the map is on your website, your API key should work. Even if it is:

https://mysubdomain.example.com/myproducts/widgets.html

If you do need to use your API key on another website, you can click the ‘ADD AN ITEM’ link again and add your next web address in there.

When you have finished entering your web address, click DONE.
referrer done

And then click the blue SAVE button.
referrer save

Congratulations, you have now set up your API key.
api complete

You can now copy the key to your clipboard by clicking the ‘copy’ icon to the right of the key.
If you wish Immedia Creative to install the API key on your website you will have to copy and paste the key into an email and send it to your contact email address, or to webmaster@immedia-creative.com. There will be a small charge for this service.

Share this post:

Immedia Creative

How to use Google Maps API keys on your Website