Google Maps Widget Tutorial

Intro

Add Google Maps to your website using Premium Google Maps Widget for Elementor Page Builder. This widget will provide you with amazing built-in features that will allow you to customize your own unique Google Maps very straightforward and simple.

In this tutorial, we will dive into how to use it and take advantage of those many options and features.

Click here to check Premium Google Maps Widget demo.

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Google Maps API Key

Firstly, you will need to get a valid Google Maps API Key to add it to Premium Addons for Elementor.

Click here to check how to Get Your API Key for Google Maps/Reviews Widget.

To add Google Maps API Key, from the Dashboard, go to Premium Addons for Elementor -> Google Maps. Then, add the API Key to activate Google Maps on your website.

Get Your Google Maps API Key and Add it to Premium Addons for Elementor Plugin
Add your Google Maps API Key into Google Maps Widget for Elementor

Add Google Maps Widget to your webpage using Elementor Page Builder.

Arrow Points at Premium Google Maps Widget in Elementor's Control Panel
Elementor Google Maps Widget

Key Features

Content

  • Center Location
  • Markers
  • Controls
  • Map Style

1- Center Location

In Center Location Settings you can set Google Map Center Location when Google Maps load on your page.

Premium Maps on Elementor Editor. Center Location Options. Latitude and Longitude Finder Option is Enabled
Center Location Settings for Elementor Google Maps Widget
  • Get User Location: Will display user device position on Google Map. 

Note: The geographic location of a user will only display if he or she has allowed location sharing.

So, Google Map Center Location will change depending on the location of the user device, For instance, if someone visited the page from New York, Google Maps Center Location on his device will be New York.

  • Latitude & Longitude Finder: Enable/Disable Latitude & Longitude Finder (search).
  • Find Latitude & Longitude: This option allows you to get the location of the place once you type the place name and click on the search button as it will automatically update the Latitude and Longitude on Google Maps.
  • Center Latitude & Center Longitude: Those two fields are geographical coordinates to identify any location you want to locate on Google Maps (Earth).

2- Markers

In the Markers tab, you can add more than one marker to Elementor Google Maps Widget.

Content and Markers Settings for Elementor Google Maps Widget
Content, Markers Settings for Elementor Google Maps Widget [Max Width, Map Pins]
  • Max Width: Set the maximum width of the marker content box that will appear as a popup window when you click on the marker icon.
  • Map Pins: Set map pins for any location on Google Maps, you can add as many pins as you want to Elementor Google Maps Widget.
  • Latitude & Longitude Finder: Enable/Disable Latitude and Longitude Finder (search).
  • Find Latitude & Longitude: Type a location to get its Latitude and Longitude coordinates.

Latitude and Longitude: Are geographical coordinates that set a marker on any spot on Google Maps (Earth).

  • Title: Give your location a title. It will be displayed when you click on the marker icon.
  • Description: Describe the place/location. For example, you can write an Address, Phone Numbers, etc. This description will be displayed when you click on the marker. For more clarification, you can check the examples in Elementor Google Maps Widget demo page or you can have a look at the screenshots below.
Premium Google Maps Widget , Markers Settings, Map Pins Repeater  is Opened, Latitude & Longitude Finder is Enabled
Add Map Pins Item on Marker, Set Latitude and Longitude, Title, Description and Custom Icon [Optional]
Premium Maps Widget Tooltip is Opened Above Google Maps Pin (Marker) on New York City
Markers Title and Description Google Maps Widget
  • Custom Icon: Select [insert] custom icon. You can upload a custom image instead of using the default one.
Elementor Google Maps Widget Custom Icon for Marker on New York City
UseThe Custom Icon Option to Upload and Select Custom Icons
Adding New Marker to Google Maps [Example]

Add new map pin (marker) to Elementor Google Maps Widget, you can use Find Latitude & Longitude search box, to specify the place you want to add a pin on it (will automatically set Latitude & Longitude Coordinates into Latitude and Longitude input boxes). Or, you can get Latitude & Longitude coordinates from [Latitude & Longitude Finder Get Coordinates] and set them manually into Latitude and Longitude input boxes in Elementor Google Maps Widget.

  1. Using Latitude & Longitude Finder: Type the location you want to add, for instance, “London”. It will automatically set the geographical coordinates (Latitude & Longitude) for the location you set, in this example, “London”.
  2. Add Title: You can set the title for the new marker. In this example, we have typed (London Pin).
  3. Add Description: Here you can set a description for the marker. In this example, we have typed (Here is London on the Map).
  4. Custom Icon: You can use the default marker Icon, or you can upload a Custom Icon that fit your needs.
Two Arrows, One Arrow Points at Input Field With Keyword "London" and a Second Arrow Points at Latitude & Longitude Fields
Latitude and Longitude Finder Option
Google Maps Pin with a Tooltip Holds a Title and a Description.
Marker [Map Pin] on London Using Latitude & Longitude Finder in Elementor Google Maps Widget

3- Controls

Premium Maps Controls and Settings  Available in Google Maps Elementor Widget With a Pin on New York City, and Marker Cluster
Google Maps Elementor Widget Controls and Settings
  • Map Type: Choose from four different Map Types.
    • Road Map
    • Satellite
    • Terrain
    • Hybrid
A Screenshot Shaows The Available Map Types in Google Maps Widget for Elementor
The Available Google Maps Types
Google Maps Pin With Marker Points at New York City, Using Google Maps Type: Terrain
Map Type: “Terrain” Using Google Maps Widget for Elementor
Premium Maps Widget Controls, Google Maps Pin With Marker Points at New York City, Using Google Maps Type: Road Map
Map Type: “Hybrid” Using Google Maps Widget for Elementor
Controls Settings on Google Maps for Elementor Page Builder, Map Type: Road Map
Map Type: “Road Map” Control Setting on Google Maps for Elementor Page Builder
Controls Settings on Google Maps for Elementor Page Builder, Map Type: Satellite
Map Type: “Satellite” Control on Google Maps for Elementor Page Builder
  • Height: Set the height for Elementor Google Maps.
  • Zoom: Set the zoom for Google Maps Elementor Widget, the more you zoom, the closer the map will be. (0) is the farthest point from the map. (22) is the closest to earth (you can view many details at this point, using Map Type Satellite).
Google Maps Display Continents and Oceans. One Single Marker and Marker Clustering are Exist on This Map.
Zoom Setting: Zero [0], Google Maps Widget for Elementor
Google Maps Display New York City Buildings, Streets, Cars, and One Marker on a Building
Zoom Setting: Eighteen [18], Google Maps Widget for Elementor
  • Map Type Control: Enable/Disable [Map type] controls on your map. So, you can allow your visitors to change the display of maps to any type.
  • Zoom Controls: Enable/Disable Zoom Controls on your map.
  • Street View Control: Enable/Disable Street View controls on your Elementor Google Maps Widget.
  • Fullscreen Control: Enable/Disable full-screen control on your Google Maps Widget.
  • Scroll Wheel Zoom: Enable/Disable Scroll Wheel Zoom, allows you to use the mouse scroll to Zoom in Google Maps as you scroll down, and Zoom out as you scroll up on Google Maps.
  • Info Container Always Opened: Set info container to be always opened.
  • Info Container Opened When Hovered: Set info container to be opened when the mouse hovers on Google Maps markers.
  • Info Container Closed When Mouse Out: If “Info Container Opened When Hovered” is enabled, then you can enable “Info Container Closed When Mouse Out” so when the mouse pointer leaves the marker, the Info Container will disappear.
  • Marker Clustering: Enabling Marker Clustering on Elementor Google Maps Widget, will help you to manage multiple markers at different zoom levels. When a user views the map at a high zoom level, the individual markers show on the map. When the user zooms out, the markers gather together into clusters, to make viewing the map easier. Click here to check Marker Clustering’s example on Google Maps Widget demo.
Marker Cluster on United Kingdom, Using Google Maps Widget for Elementor
Marker Clustering Option Enabled on Elementor Google Maps Widget
Marker Clustering and One Marker on United Kingdom Using Google Maps Widget for Elementor
Marker Clustering Count Decreases While you Zooming-In
3 Markers on United Kingdom Using Google Maps Widget for Elementor
Google Maps Marker Clustering Will Disappear When You Zoom-In

4- Map Style

Map Style Tab Shows an Input Text Box to Add JSON Code to Google Maps Widget for Elementor Using Snazzy Maps.
Style Your Google Maps Using JSON Code from Snazzy Maps

The available styling options Google Maps Elementor Widget will allow you to change your Map Style to your liking, you can use Snazzy Maps to choose from many different styles that are available on it.

All you have to do is to copy the JavaScript Style Array from Snazzy Maps, and past it into Map Style -> JSON Code box.

Arrow Points at JavaScript Style Array on Snazzy Maps. This Will be Used to Style Elementor Google Maps Widget.
JavaScript Style Array on Snazzy Maps
A Screenshot Shows an Elementor Google Map With Light and Simple Custom Skin Using a JSON Code. The Blue Color Represent The Water Spaces and The Grey Color Represent The Wide Areas.
Google Maps With Custom Skin

Style

  • Title
  • Description
  • Map

1- Title

Premium Google Maps Widget Styling Options for Marker Content Box Title
Title’s Styling Options Available in Google Maps Widget for Elementor
  • Color: Set the color for Marker Content Box Title.
  • Typography:
    • Font Family
      • Font Size
      • Font Weight
      • Transform:
        • Uppercase
        • Lowercase
        • Capitalize
        • Normal [Reads the text as you typed it]
      • Font Style:
        • Normal
        • Italic
        • Oblique
      • Decoration:
        • Underline
        • Overline
        • Line Through
        • None
    • Line-Height: Set Font Line-Height.
    • Letter-Spacing: Set Font Letter-Spacing.
Arrow Points at Title's Typography Group Control Which is Available in Elementor Google Maps Widget
Title’s Typography Group Control
  • Margin: Adjust Title margin in Pixel, EM, or %.
  • Padding: Adjust Title padding in Pixel, EM, or %.
  • Alignment: Align Title to Left, Center, or Right.

2- Description

A Screenshot Shows Description Styling Controls Which is Available in Premium Google Maps Widget for Elementor
Description’s Styling Controls in Google Maps Widget
  • Color: Set the color for the Marker Content Box Description.
  • Typography:
    • Font Family
    • Font Size
    • Font Weight:
      • Transform
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal [Reads the text as you typed it]
    • Font Style:
      • Normal
      • Italic
      • Oblique
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set Font Line-Height.
    • Letter-Spacing: Set Font Letter-Spacing.
  • Margin: Adjust Description text margin in Pixel, EM, or %.
  • Padding: Adjust Description text padding in Pixel, EM, or %.
  • Alignment: Align Description text to Left, Center, or Right.

3- Map

The Available Styling Options in Google Maps Widget for Elementor Page Builder
Style Your Google Maps Widget for Elementor
  • Border Type: Select between the following border types:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Set Border Radius for the map to display rounder.
  • Shadow: Set shadow for Google Map:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
Shadow Styling Group Controls Which is Available in Elementor Google Maps Widget
Set Shadow Styling for Google Maps
  • Margin: Adjust Map margin in Pixel, EM, and %.
  • Padding: Adjust Map padding in Pixel, EM, and %.

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.

Close Menu