Skip to Navigation
Have you ever had a situation when a developer asked you for Google Maps API Key to display embedded maps on your website? Most website owners got through this and it doesn’t have to be as hard as you think. Not with this tutorial. Shall we start?
Preparation
You need only two things for this task:
- You have to be logged in to gmail.com account or your company mail if that is in a Google Workspace
- and your credit or debit card that you can pay with on the web
Let’s start
1. Go to the website, https://cloud.google.com/ and click on Get started for free on the top right on-page.
2. Log in to your Gmail account if the website asks for it.
3. Fill up the form from step 1 and accept the terms and conditions
4. Verify your identity with your phone number in step 2
5. Fill in your personal or company details in step 3. Also, you have to add your credit or debit card details. After that click Begin trial button.
Creating Google Maps API Key
Once you have set up your account, you should be redirected to the main dashboard of your Google Cloud Account. In GCP (Google Cloud Platform) you can create multiple projects for your needs. It is a good practice to create different GCP projects for different applications or websites. If you are new and just registered your account, Google created a default project for you named, My First Project which you will find in the top-left corner as a dropdown button. We might use it to create our Google Maps API Key.
Click on the bars icon in the top-left corner and select API interfaces and services and then Library.
The library is a collection of available API services that Google has to offer. You can find here a lot of services for maps, workspaces, advertisements, data storage, and search engines. Firstly you need to enable the service that you wish to use in your API Key. So using search input find Maps javascript API and click on it to see details. On the details’ page click on Enable to enable this service for your API Key.
Great! Now the service is enabled. So we can create API Key now. For that click on the bars icon on the top-left corner and select API interfaces and services and then Credentials. On that page, you will find a list of your API Keys so if you are here for the first time your list should be empty. Follow the list below to create a new key:
- Click on top of the page on
Create credentials - On dropdown select
Interface API Key
That’s it! Your API Key has been created and is ready to use.
Limiting your Google API Key
Once your API Key is generated, you can limit access to your key to prevent others from using it at your cost. On the list of API Keys, click on the pencil icon next to your item.
There you should find settings for your API Key such as name and restrictions. In section Application restrictions you may want to limit your API Key only to your domain. Select HTTP referrers (web sites) and add your domain addresses with schema:
www.example.com/path – for a specific subpage of your website with defined www prefixexample.com/* – for all subpages without defined www prefixsub.example.com/* – for all subpages in a subdomain*.example.com/* – for all subpages on all subdomains (including www and non-www)
In section API restrictions you may want to limit your API Key to services you previously enabled in Library. This restriction will work if you have enabled more than one API service and you wish to have separate keys for every service or group of services. Simply select Restrict key and from the dropdown select the service you want to limit to – in this case, it would be Maps Javascript API.
Keep in mind that changes on API Key might need around 5 minutes to apply, so it is worth checking if API Key works fine after that amount of time.
Comments