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”
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.
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.
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:
- Go to the Google Cloud platform
- Open the navigation menu
- Click on the “Library” tab under “APIs and services”
The 4 libraries that need to be enabled are:
- Maps JavaScript API
- Directions API
- Geocoding API
- Places API
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.
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”.
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:
- Login to your WP Maps account
- Go to the “Widgets” tab
- Click on the “Install Widget” button to create your store locator widget
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:
- Click on the “Widgets” tab
- Locate the build you have created, and click on the “Update” button
- Now the build that you had previously created will use the Google Maps API key that you added
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
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”
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.