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/feature/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.

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

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.

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

• 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.
• Custom Icon:Select [insert] custom icon. You can upload a custom image instead of using the default one.
• 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.
• Custom ID: Use this with Premium Carousel widget Custom Navigation option.

• Custom Icon: Select [insert] custom icon. You can upload a custom image instead of using the default one.

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. Custom Icon: You can use the default marker Icon, or you can upload a Custom Icon that fit your needs.
2. 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”.
3. Add Title: You can set the title for the new marker. In this example, we have typed (London Pin).
4. Add Description: Here you can set a description for the marker. In this example, we have typed (Here is London on the Map).

3- Controls

• Map Type: Choose from four different Map Types.
  • Road Map
  • Satellite
  • Terrain
  • Hybrid

• 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).

• Disable Map Drag: Enable/disable map drag.
• 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.

4- Map Style

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.

Style

• Title
• Description
• Map

1- Title

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

• 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

• 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

• 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

• Margin: Adjust Map margin in Pixel, EM, and %.
• Padding: Adjust Map padding in Pixel, EM, and %.