How to generate Elementor Google Maps Widget API Key?

Updated on June 24, 2024 by Editorial Team
Table Of Content

To use The Plus Addons for Elementor Google Map widget, you must have a Google Maps API key.

So let’s see how you can generate a Google Maps API key.

To create a Google Maps API key click here.

From there, click on the Go to the Credentials page button.

To check the complete feature overview documentation of The Plus Addons for Elementor Google Map widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

Create a New Project

From the Credentials page, you have to create a new project.

Google map api step 1
  1. Add a Project name.
  2. Enter your location and click on the Create button.

Set up Billing

Once the project is created, you have to set up billing information for your project on the next page.

Google map api step 2

Step 1

  1. Choose your country.
  2. Agree to the Terms of Service and click on the Continue button.
Google map api step 3

Step 2: Create a new billing account

  1. Choose a name for your billing account.
  2. Verify the details and click on the Continue button.

On the next page, add your billing information.

Google map api step 4
  1. Choose your Account Type.
  2. Fill in your Tax information.
  3. Add your personal details.
  4. Add a payment method (For example Credit Card). Click on the Submit and Enable Billing button.
Google map api step 5

On the next page, choose your project’s billing account and click on the Set Account button.

Then Google Maps will ask a few questions related to your project, like your industry, the platform you are building the project for etc. fill in the answers accordingly and click on the Submit button.

Google map api step 6

On the next page, you will get your Google Maps API Key, copy the API and click on the Go to Google Maps Platform button.

Now you have your API key but as per Google Maps recommendation you need to restrict the usage of your API key by limiting its use to the required APIs for your application.

Protect your API (adding Maps Embed API)

Now on the next page, Google Maps will automatically ask you to protect your API key.

Google map api step 7
  1. Select restriction type as API restriction.
  2. And from the Limit usage dropdown, select Maps Embed API and click on the Restrict Key button.

Now the usage of your API key has been restricted. To check the list of enabled APIs for your project, click on the APIs from the left panel and it will display all the enabled APIs.

Google map api step 8

Now you can use your newly created Google Maps API Key with The Plus Addons for Elementor Google Map widget.

To do this, go to

  • The Plus Settings Extra Options 
  • Scroll down to Google Map API Key section and paste your API key.
  • And on the other Google Map API Key section, choose Show from the dropdown, then click on Save.
Google map api

Also, check out How to Remove Elementor Google Maps API Error browser console.

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website