How To Use Google Maps Elementor Widget (4 Simple Steps)

Using Google Maps is a great way to show where your business is located or some other place you wish to show on the map. Maybe you want to show where you visited while traveling in your traveling blog. But how do you use Google Maps in Elementor? In this guide, we will show you how to create a Google Maps Embed API key and how to integrate it into your Elementor in four simple steps.

Creating a Google Maps API key for Elementor

Before we dive into creating our map in Elementor we are required to create a Google Map API key which Google requires so we can use Google Maps. To create a Google Cloud account here.

After filling in the required fields you can follow steps 1 through 4 here.

Step #1 – Create a new cloud project

To get started we need to create a new cloud project from the Google Cloud Platform, select “create a New Project”.

Give your project a:

• Project name (Note that you can’t change the name later on!)
• Organization
• Location

and click “Create” to create a new project that we will be using to create and add the API keys.

Step #2 – Creating API Credentials

From the APIs and Services > Credentials Tab, click the “+ Create Credentials” -link and select the API key.

IMPORTANT – This key will be used in the Elementor so remember to save it!

After clicking the API key Google will generate a new API key for you.

Note – Do not reveal this key to anyone else or they will be able to use the same API as you and it might cause unauthorized access to your projects or even cost you money when they generate requests to the API and go over the free tier limit.

Step #3 – Adding Applications

Now that we have an API key created we can associate applications to that API key. To add an application to this key. From the APIs and Services dashboard click on the library.

To quickly find the right Map API we want to use, write “Maps” on the Search bar at the top and select the Maps Embed API for the Elementor Widget (shown in the image).

Click the “Enable Maps JavaScript API“ button to enable the API.

Once everything is ready your list of available APIs should look something like shown below.

Step #4 – Add the API key to Elementor

As for the final step, simply go to your WordPress dashboard and navigate to Elementor > Settings > Integrations and place the API key from step #2 in order to use the Maps Widget. 

[Bonus] – How to add Google Maps to WordPress with Elementor

Conclusion

Using the Google Maps Elementor Widget is a bit tricky because how Google has decided to change their maps policy requiring users to create an account and to register to their platform so they can follow the number of requests some sites generate to their map API, but thankfully by following this guide you can achieve it in just four steps, quickly and easily.