How to Easily Get a Google Maps API Key

In this article, we will explain how to get a Google Maps API, for free, that can be used on your WP Maps account.

As of 2018, Google has changed the rules of its platform. Now, you will need to have a Google Maps API key with a linked billing account to use the services of Google Maps. In any other case, Google Maps will not function on your website. This includes the Google Maps widget that is available on the WP Maps store locator.

How to Get a Google Maps API Key  #

First of all, let’s see how you can get a Google Maps API Key.

To get a Google Maps API Key please follow the below steps.

Step 1: Go to Google Cloud Console (https://console.cloud.google.com/) and create a “new project”

Screen Shot 2024 07 09 At 11.43.58 Am

Step 2: Before you can proceed further, you will need to create a billing account by providing your credit card or debit card information. You will be prompted at the beginning to create a billing account. Simply follow the on-screen instructions to create a billing account.

Screen Shot 2024 07 09 At 11.48.28 Am

You do not need to worry about high charges on your credit/debit card because as long as you don’t have very high API usage, you will never be charged a single cent. In addition, at the start of every month, your Google account will be credited with 200 USD to use for API services such as Direction API, Geocoding API, and Javascript Google Maps API.

So websites having normal API usage can use Google Maps and its services for FREE. However, some sites will be charged for high usage.  Please refer to the below link to get a better idea about how much free usage is possible with the 200 USD credit. 

Google Pricing Page.

Step 3: Name the project and create it. Once the project is created go to the project dashboard

Step 4: Enable 4 API libraries that will be used in your store locator by following the below steps:

  1. Go to the Google Cloud platform 
  2. Open the navigation menu
  3. Click on the “Library” tab under “APIs and services”
Screen Shot 2024 07 09 At 11.51.50 Am

The 4 libraries that need to be enabled are:

  1. Maps JavaScript API
  2. Directions API
  3. Geocoding API
  4. Places API
Screen Shot 2024 07 09 At 11.57.32 Am

To enable an API library, simply click on it and then click on the “Enable” button on the next page.

Step 5: Next, click on the navigation menu icon, on the “API and Services” tab, click on “Credentials”.

Step 6: On the next page, click on “CREATE CREDENTIALS” and then select “API Key” to generate the “Google Maps API Key”. Copy this key into your WP Maps account.

Screen Shot 2024 07 09 At 12.02.12 Pm

How to Add Your Google Maps API Key to Your WP Maps Account #

Now that you have generated a Google Maps API key, let’s see how you can add it to your WP Maps account.

Step 1: Log in to your WP Maps account and  go to the “Administrator” tab on the sidebar menu

Step 2: Paste the generated API key under “Google Maps” in the “API keys” tab, and then click on “Save API Keys”.

Add Google Maps Api Key To Wp Maps

Now when you create a store locator widget using WP Maps, the Google Maps embed on the store locator widget will function properly.

To create a store locator widget using WP Maps please follow the below steps:

  1. Login to your WP Maps account
  2. Go to the “Widgets” tab
  3. Click on the “Install Widget” button to create your store locator widget
Screen Shot 2024 07 09 At 12.34.39 Pm 1

Please see the following article for more details on how to configure a store and product locator widget on WP Maps.

If you have already created a widget build, then you will need to update the build after you add the Google Maps API key. To update an existing build, please follow the below steps:

  1. Click on the “Widgets” tab
  2. Locate the build you have created, and click on the “Update” button
  3. Now the build that you had previously created will use the Google Maps API key that you added
Screen Shot 2024 07 09 At 12.38.19 Pm 1

How to Restrict Your Google Maps API Key #

Now that we have generated a Google Maps API key and added it to WP Maps, we will need to restrict the generated API key so that only your website is able to use it.

To prevent other websites from using your API keys, please follow the below steps:

Step 1: On the Google Cloud Platform go to “Credentials” 

Step 2: Click on the “Edit API Key” icon for the API key you want to restrict

Screen Shot 2024 07 09 At 12.39.41 Pm

Step 3: On the “Restrict and rename API key” page, select the “websites” option under “Set an application restriction”

Step 4: Copy the name of your website from the URL (without the URL protocol), paste it into the “Add website” field (click on the “ADD” button to get this field), and then click on “Done”

Screen Shot 2024 07 09 At 12.49.07 Pm

Step 5: Add another item and add your website name again but this time with “/*” at the end

Step 6: Press “Save” and your APIs will be restricted

For more details on how to get a Google Maps API key and how to add it to WP Maps, please see the below article which includes a video tutorial.