14500+ website owners are using this wordpress map plugin

Buy Now - $89

Generating a Google Maps API Key

Google Maps API Key

The very first step in creating and displaying a google maps on any website is to create a google maps API key.

Below is a step-by-step guide that will help you in creating the right google maps API key for your website. Google Maps requires the usage of an API key in order to work properly, as stated by the company’s new regulations in June 2016. Follow these steps to generate a google maps api key:

Log in to the Google Cloud Platform:

    • Go to the Google Cloud Platform Console.
    • If you don’t have a Google Cloud account, you’ll need to create one. Otherwise, log in using your existing account.

Create a New Project:

Google Cloud New Proejct
fig 1: Google Cloud New Proejct
  • If you haven’t already created a project for your WordPress site, click the project dropdown in the top navigation bar and select “New Project.”
  • Give your project a name, choose the organization (if applicable), and click “Create.”
Google Cloud Project Details
fig 2: Google Cloud Project Details

 

 

  • Once a project is created, you’ll be redirected to the project dashboard.
Google Cloud Project Dashboard
Fig 3: Google Cloud Project Dashboard
  • Once you’re in your project dashboard, click on the “APIs & Services”.

Enable  APIs & Services:

Google Cloud API Library
Fig 4: Google Cloud API Library

The ‘APIs & Services’  page provides detailed traffic information for each enabled API. It’s a valuable resource for monitoring which APIs are active and understanding how each API is being utilized. In the following step, please enable the following four APIs for WP Maps Pro: Maps JavaScript API, Places API, Geocoding API, and Directions API.

Google Cloud Library Page
Fig 5: Google Cloud Library Page
  • Click on the “APIs & Services” > “Library” to search for required APIs and enable them.
  • Search for APIs: In the Library, search for “Maps JavaScript API” and click on it. Then click the “Enable” button.
Maps Javascript API Page
Fig 6: Maps Javascript API Page
  • Repeat for Other APIs: Repeat for the other three APIs: Places API, Geocoding API, and Directions API. Enable each of them.

Create an API Key:

Creating an API key for Google Maps is essential because it grants your application access to the Google Maps Platform services. This key acts as a unique identifier, allowing Google to track your usage and ensuring that you comply with usage limits and billing requirements.

    • In the Cloud Console, click on the “Navigation Menu” > “APIs & Services” > “Credentials.” and Click the “Create Credentials” button

      Google Cloud Credentials Dashboard
      Fig 7: Google Cloud Credentials Dashboard
    • and select “API key.”

      Google Cloud Credentials API Key
      Fig 8: Google Cloud Credentials API Key
    • A new API key is generated and displayed. When generating an API key, it initially comes without restrictions. It is highly recommended to restrict the API key to prevent unauthorized usage and ensure security.

      Google Cloud Credentials API Key Unrestricted
      fig 9: Google Cloud Credentials API Key Unrestricted

Restrict the API Key (Recommended):

In this step, we’ll apply two types of restrictions: Key Restrictions and API Restrictions. In the Cloud Console, go to “APIs & Services” > “Credentials.”. Find your API key in the list and click on it to apply these restrictions.

Key Restrictions: These restrictions are applied directly to the API key itself. There are two types:

  • Websites: You can specify the web domains (URLs) from which the API key is allowed to be used. This helps ensure that the API key is only used on authorized websites.
  • IP Addresses: You can specify specific IP addresses or IP ranges that are allowed to use the API key. This adds an extra layer of security by limiting access to known IP addresses.

    Google Maps API Key Restrictions
    Fig 10: Google Maps API Key Restrictions

Correctly adding the website URL is crucial for the maps to display properly. Here are the proper URL formats with clear examples to ensure the setup is accurate:

  1. Single Domain URL:
    • Example: https://example.com
    • Example: https://www.example.com
    • Example: http://www.example.com
    • Example: http://example.com
  2. Single Subdomain URL:
    • Example: https://sub.example.com
    • Example: http://sub.example.com
  3. All Subdomains in a Single Domain using a Wildcard:
    • Example: https://*.example.com
    • Example: http://*.example.com

API Restrictions: These restrictions control which APIs can be accessed using the API key. You can choose which Google APIs the key can be used for. This helps to prevent unauthorized usage of APIs that your application doesn’t require.

Google Maps API Key - APIs Restrictions
Fig 11: Google Maps API Key -APIs Restrictions

Linking a Billing Account to Your Google Maps API Key:

Linking a billing account to your Google Maps API key is a crucial step to ensure the continued functionality of your maps and location-based services. Without an active billing account, your API key may be limited or restricted, affecting the availability of map data and essential features on your website or application.

Step 1: Go to the Project Dashboard:

  1. Start by accessing your Google Cloud Platform Console.
  2. Select the project where you’ve generated the Google Maps API Key.
  3. Within the project dashboard, locate and click on the “Billing” link. This link takes you to the billing settings for the selected project.
Google Cloud Billing
Fig 12: Google Cloud Billing

Step 2: Check for Existing Billing Account:

Upon accessing the billing settings, you may encounter a notification indicating that no billing account is currently associated with the project. This is a common message, especially if this is your first time setting up billing for this particular project.

  1. To link a billing account, click on the “Link a billing account” button. This action initiates the process of connecting a billing account to your project.

    Google Cloud Billing LInk
    Fig 13: Google Cloud Billing LInk
  2. You’ll now be presented with a list of available billing accounts. Choose a billing account that is associated with the “Google Maps Platform.” This ensures that the account will cover the usage of the Google Maps services utilized by your project.
  3.  Once you’ve selected the appropriate billing account, confirm your choice, and follow any on-screen prompts to finalize the linking process.

That’s it! You’ve successfully generated a Google Maps API key and you’re ready to leverage the power of Google Maps on your website, and you can start creating dynamic and interactive maps. If you encounter any issues or need further assistance, refer to the plugin documentation or reach out to WP Maps Pro support.

Related Tutorials:

Related Examples:

Was this article helpful?
YesNo

Install Plugin Now!

This plugin is exclusively available at codecanyon.net. You'll get free updates and full support to use this plugin.