How to embed Google Maps API key on your website

Acclaim/Blog/Articles/How to embed Google Maps API key on your website
  • Comments icon
    0 comments
  • 3 minutes of reading
  • 893 views
Share

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?

Google maps icon to embed map on website

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

Pic 1. Step one of three google cloud configuration form
Pic 1. Step one of three google cloud configuration form

4. Verify your identity with your phone number in step 2

Pic 2. Step two of three cloud configuration form
Pic 2. Step two of three cloud configuration form

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.

 Pic 3. Step three of three cloud configuration form
Pic 3. Step three of three cloud configuration form

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.

Google Maps JavaScript API library service
Google Maps JavaScript API library service

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:

  1. Click on top of the page on Create credentials
  2. 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.

Google Cloud API Keys list
Pic 5. Google Cloud API Keys list

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 prefix
example.com/* – for all subpages without defined www prefix
sub.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.

Related articles

Why choose a mobile-first approach for web development?

The Mobile-First approach focuses on developing an interactive experience for mobile devices before designing desktop websites. Find out why you need to pick mobile-first for your next website development project.

Comments

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.