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 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

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.

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

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:

Address Type :

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

Marker Settings

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

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: