How to Get Started in Creating and Setting Up a Google Maps API Key

How to Create and Setup a Google Maps API Key

Are you looking to embed an online map, such as Google Maps, on your web page? Well, to make the widget function properly, you will need to get an API key first. You will also need to know how to use this API key.

Therefore, in this article, we will provide you with Google Maps API key setup instructions, which will tell you how to create the API key and how you can use it.

What are API Keys?

API Keys are codes or tokens that allow one platform to communicate with another. 

For example, if you are planning to embed Google Maps on your website, then to make the map embed function and act just like the original map, you will need an API key. This API Key can be created from the Google Cloud Console.

The API key will add functionality features of Google Maps, such as optimized route planning, real-time traffic conditions, dynamic map displays, map styles, advanced markers, etc. To any web page you assign it to.

What is a Google MAPS API Key?

An API key that is used to communicate with Google Maps, which gives a map widget and all its capabilities, is known as a Google Maps API key.

There are lots of third-party platforms that require API keys to operate a map widget on your website. 

For example, a store locator software can add a store locator widget to your website. The store locator widget has a built-in Google map. Moreover, for this map to function properly, you will need a Google Maps API key.

An API key is unique to every website. Therefore, whatever API you create needs to be kept confidential. In addition, each API key is billed independently of other API keys, even if they are from the same account or origin.

How to Get a Google Maps API Key

Let’s now see how you can create an API token for the map embedded in your website.

Step 1 – Log in to the Google Maps Platform and Create a New Project

Firstly, you will need to log in to the Google Maps Platform (or the Google Cloud Platform) using your Google account. Once you are there, press the “Get started” button to begin.

Once you’ve logged into Google Maps Platforms, you will need to create a new project. To create a new project, please follow the below steps:

1. On the dashboard, click on the “My First Project” button
2. Click on “NEW PROJECT” on the “Select a Project” window
3. Give your project a name, and complete the rest of the steps

Step 2 – Create a Billing Account

Before you can proceed further, you will need to create a billing account by providing your credit or debit card information. Without providing your billing information, you will not be able to proceed.

To add your billing information on the Google Maps platform, please follow the below steps:

1. On the dashboard, click on the three-line menu icon on the top-left corner of the screen
2. Click on the “Billings” tab

3. Fill in the billing information such as company name, address, credit/debit card information, etc.
4. Click on “Start Free” to complete the process

Step 3 – Activate API Libraries

Once you have created a new project and added your billing information, you will next need to activate the API libraries for the services the Google Maps embed on your website will use. 

For example, if you want to add a map widget to your website that provides directions between places, then you will need to activate the Direction API libraries.

To activate or enable a certain API, please follow the below steps:

1. Click on the menu bar on the dashboard
2. Select the “APIs and services” tab, and click on the “Library” sub-tab

3. On the API Library page, you will see a grid of all the map service libraries

4. To enable an API library, simply click on one and press “Enable” on the next page

5. Repeat the process for any additional API libraries that you will need

If you want to see what API libraries you have enabled, select an API library that you previously enabled and click on the “Manage” button. You will be taken to a page that shows all the API libraries that you have enabled.

Depending on the purpose for which you are adding the map widget to your website, you will need to activate different API libraries.

For example, if you are adding a Google Maps widget via a store locator software, such as WP Maps, then you will need to activate the following libraries:

1. Directions API – to provide directions from one place to another
2. Places API – To get information on different places
3. Maps JavaScript API – To add the map widget to your website
4. Geocoding API – To convert addresses to geographical coordinates and vice versa

Step 4 – Generate An API Key

After you have enabled the required API libraries, it’s now time to create the API key.

To create an API key, please follow the below steps:

1. Click on the menu bar on the dashboard
2. Select the “APIs and services” tab, and click on the “credentials” sub-tab

3. On the “Credentials” page, click on “Create Credentials” and select “API key” 

4. A pop-up window will appear with your newly created API key

5. Copy the API Key and save it somewhere

DO NOT close the pop-up window just yet because it contains a link to a section where you can restrict the API key you just created. We will get to restricting an API key in the upcoming section.

Step 5 – Restrict the API key You Created

To prevent others from using your newly created API key, you will need to restrict your API key so that it only works on your specific website or domain.

To restrict an API key, please follow the below steps:

1. If you still have the API key pop-up window open from the previous step, then you simply need to click on “Edit API”
2. If you have closed the pop-up window, then click on the three-line menu icon on the dashboard, select “API and services”, and click on “credentials”

3. On the next page, you will see a list of the APIs you have generated; click on the one you want to restrict
4. On the “Edit API Key” page, go to the “Set an application restriction” section and select the “Websites” (HTTP Referrers) option

5. Next, go to the “Website restriction” option and click on the “Add button”
6. Enter your website name in the following format: yourwebsitename.com/*
7. Press the “Add” button again and add your website name once more in the following format: *.yourwebsitename.com/*
8. Click “Save” when you are done

Now, the API key that you just restricted can only be used on the website domain you provided in points 7 and 8.

Step 6 – Use Your Newly Created API Key

Now that you have created and restricted an API key, it is time to use it.

Depending on what you are planning to do, you will need to add the API key to add a Google Maps widget to your website.

Let’s take a look at a use case where someone uses the API key.

Check Related Blog: Importance Of Location Marker Icons

Situation: A business owner with multiple stores and a website wants to add a store locator widget to his website to help paying customers reach his physical stores.

A store locator widget is a section on a website that has the following elements:

1. A large map by a map provider such as Google Maps, Mapbox, etc.
2. A search bar
3. A list of the business owner’s stores

All the above elements work together to guide customers from the website to a physical store if they want to buy a product in-store after discovering it on the website.

To add a store locator widget to his website this person can use the store locator app, WP Maps, to easily add a store locator widget to his website with minimum effort. Furthermore, WP Maps comes fully integrated with Google Maps which allows you to add many of Google Maps’s features to your website. In addition, WP Maps also comes with Mapbox integration for those users who prefer to use Mapbox.

To add the Google Maps API key to WP Maps, this person will simply need to follow the below steps:

1. Login to their WP Maps account
2. Click on the “Super Admin” tab on the left-hand panel
3. Select the “API keys” tab on the super admin page, and select the “Google Maps” sub-tab
4. Here, they can paste the API key so that the Google map on their store locator widget can function properly

Once the API key is added, the process is complete.

Moreover, you can read the following article to find out how to add the Google Maps API key to WP Maps.

Here is a video tutorial that details the entire process of generating an API key and then adding it to the WP Maps platform to add a store locator widget for your website.

This is just one of the many cases where a person can use an API token.

On a side note, if you are also interested in adding a store locator widget to your website, then we highly recommend using WP Maps for its affordable price, powerful features, and ease of use.

Check Related Blogs: How are tags useful in a store locator

Frequently Asked Questions (FAQs)

What Does A Google Maps API do?

A Google Maps API Key allows users to embed a Google Map along with its functions on a website.

Is the Google Maps API Key Free?

Yes. While getting a Google Maps API key is free, you will still need to create a billing account using your credit card information. In addition, Google will provide you with $200 worth of free monthly credit; this equals 28,500 free map loads per month. You will only be charged after you exceed this limit.

Which Map API Key is the Best?

Google Maps is arguably the most popular map API integration provider that is used on thousands of websites.

What is the Limit of Google Maps API Key?

For the Google Maps API, there is no limit to the number of requests you can make per day. However, some services may have a usage limit per minute. For example, the Maps Javascript API can only process 30,000 requests per minute.

What is the Cost of a Google Maps API Key?

The API key itself is free. However, you will be charged for API usage. Moreover, Google will provide you with $200 worth of free monthly credit, which equals 28,500 free map loads per month. You will only be charged after you exceed this usage, and it also depends on what services you use.

Conclusion

If you’re planning to embed a Google Maps widget on your website, you will first need to get its API key to make the map function as a proper Google map.

Once you create the token, you will simply need to add it to the platform through which you embed the map widget.

Google provides a flexible pricing plan for each service your API key uses. In addition, you get $200 worth of free API usage per month, and you are only charged after you exceed the free limit.