fbpx

How to Add Google Maps In 2 Minutes Using Elementor

As we speak about including Google Maps to your Website, images of Javascript, CSS might conjure up in your mind. But you do not need to learn Javascript, CSS or install a plugin just for inserting a Google Maps section to your Website.

How to Add Google Maps In 2 Minutes Using Elementor 1

How cool would it be if you had a particular section on your Website displaying Google Maps pinpointing your company location? Furthermore, if you have a Google Maps section on your website you are giving your visitors access to your location, seek direction and also zoom out to see the surrounding locality.

Get Essential Addons To Embed Google Maps

How to Add Google Maps In 2 Minutes Using Elementor 2

To add Advanced Google Maps on your Website you need to add an Addon to Elementor. It’s the most powerful Addon Library for Elementor. You can get the plugin from here. If you need assistance in getting the Plugin, here is a quick documentation on how to Install The Plugin.

Now that you have equipped your WordPress Website with the necessary plugins, let’s get down to business.

Embed Google Maps On Website

The first thing you need to do, to use the EA Advanced Google Maps is set the API Key.

If you don’t find the Advanced Google Maps in the Elementor Side Panel, check if you have activated the Google Maps element. To use Advanced Google Map, you need to set your Google Map API Key from Essential Addons Elementor > Elements under WordPress Dashboard.

Setting up API Key

To use Advanced Google Map, you need to set your Google Map API Key from Essential Addons Elementor > Elements under WordPress Dashboard.

How to Add Google Maps In 2 Minutes Using Elementor 3

Click on “Settings” and place your API Key on the settings pop up :

How to Add Google Maps In 2 Minutes Using Elementor 4

You might need to enable following APIs based on the map type you use :

  • Directions API (For Routes)
  • Geocoding API (For Address, if you don’t use coordinates)
  • Maps JavaScript API
  • Places API (For multiple markers)

Using Map element

There are 8 different types of the map that you can select from the drop-down:

How to Add Google Maps In 2 Minutes Using Elementor 5

Address Type :

You can either write your address or define the exact coordinates (latitude and longitude) values :

How to Add Google Maps In 2 Minutes Using Elementor 6

Marker Settings

You can set multiple markers based on the map type you set. Markers support custom icon and custom color (for static map).

How to Add Google Maps In 2 Minutes Using Elementor 7

Wrapping Up!

Were the instructions easy to follow? Like Google Maps there are other elements that you can embed on your Website. The most common of which is a Twitter Feed. Here is a quick blog on how to embed a Twitter Feed on your Website’s side/footer panel.

For further assistance, you can check this following video tutorial on how to easily configure EA Advanced Google Map:

Will You Recommend Our Plugin To Your Friends?

Picture of Afshana Diya

Afshana Diya

Afshana Diya is CMO at WPDeveloper. She is helping the company to create a dynamic team and sustainable business from the scratch. When she is offline from the digital world, she must be traveling to find natural beauty in remote places.

Share This Story

1 thought on “How to Add Google Maps In 2 Minutes Using Elementor

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.