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)
- 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 :
You can set multiple markers based on the map type you set. Markers support custom icon and custom color (for static map).
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: