• Home
  • Plus Widgets
  • How to add a map to your website using the Google Maps widget
< All Topics

The Google Map widget lets you add a map to your website using which your audience can locate your Shop or Office. You can add multiple pinpoints at once and showcase all your offices/stores. Adding maps to your website itself not only makes it easy for customers to locate their nearest office or store but also looks good. The majority of users also prefer Google Maps.

Pro tip
Why not add maps to your website using this widget. This of the most advanced Elementor google map widget with lots of options. Make sure to enter the correct address while adding a map.

How to use the Google Maps Widget of The Plus Addons For Elementor

The Google Maps widget comes with different layouts. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

Adding Google Maps To WordPress

To use the Google Maps widget first you need to add the Google Maps API key in the Plus settings. If you do not know how to get the API key then visit this link https://developers.google.com/maps/documentation/javascript/get-api-key. This page has all the steps you require to get a API key. A screenshot of the same is posted below.

Get API key for Google Maps widget.

Then once you have the API key you need to open the plus settings and then go to the extra setting options and find the Google Maps API section as shown in the video below. Then paste the API key in the respective field.

General Steps

Search for the Google Maps element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Google Maps widget. First, click on the Content tab.

1. Content

Content

Add Multiple Location Point

A location repeater which allows you to add multiple locations or pins in a same map, if you want one add single entry in this repeater.

Latitude Value

Add latitude value of your location in here. A little note and link will help you find your location’s latitude value.

Longitude Value

Add longitude value of your location in here. A little note and link will help you find your location’s longitude value.

Address Text for Tooltip

Tooltip or a little note for particular location will be displayed on location pin’s click. Add text here.

Pin Icon

Add custom pin icon here.

Map Style

Map Zoom

Add initial zoom on load for the map. Use cam change it afterwards if you allow so.

Map Options

A selection box for the map options provided by Google Maps itself. Select whatever option you want to let user use.

Google Map Variations

A map variation selection like Road map, Hybrid, Terrain etc. Choose whichever you want to display.

Custom Style Maps

Some designs provided by The Plus for google maps. Choose one wisely.

Modify Hue, Saturation & Lightness

Enable this and add customised values of Hue, Saturation & Lightness for the map.

Map Overlay

Content Over the Map

Enabling this option will push the google map into background and you can have some content over it. Map controls won’t work then.

Title

Add content title.

Description

Add content description.

Background Type

Apply suitable background like color/ gradient to an element.

Title Typography

Assign size, weight, spacing and much more to fonts.

Title Color

A color picker to assign suitable color to the title.

Description Typography

Assign size, weight, spacing and much more to fonts.

Description Color

A color picker to assign suitable color to the content.

Toggle Button Color

A color picker to assign suitable color to the button.

Toggle Button Active

A color picker to assign suitable color to the button in active state.

2. Style

The Style tab is used for customizing the appearance of all the Google Maps widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Edit CSS filters in Google Maps widget.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?