---
title: "Google Maps Elementor Widget Settings Overview"
url: https://theplusaddons.com/docs/google-maps-elementor-widget-settings-overview/
date: 2023-02-04
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "The Google Map widget in The Plus Addons for Elementor puts an interactive map on an Elementor page, with one pin per location, your own marker images and a block..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/Google-Maps-Elementor-Widget-Settings-Overview-1024x536.jpg
word_count: 1558
---

# Google Maps Elementor Widget Settings Overview

## 

- The Plus Addons for Elementor Pro ships the Google Map widget only, and the free plugin shows it as a locked Pro widget that cannot be added to a page.
- Google Map uses the Google Maps JavaScript API and needs a Google Maps API key, while Open Street Map (OSM) uses OpenStreetMap tiles through Leaflet and needs no key, no account, and no billing.
- Google Map lets each row in Add Multiple Location Point define one pin with Latitude Value, Longitude Value, Address text for Tooltip, a Pin Icon image, and Image Resolution.
- Open Street Map (OSM) adds a layers box in the top right corner with four base maps, OSM, OSM.de, OSM.ch, and OSM.Fr, plus every point by its Point Name so visitors can switch points on and off.
- Version 6.5.0 leaves Google Map empty on the published page with tp_map_gmap is not defined in the browser console, while Open Street Map (OSM) still draws on the published page.

The **Google Map** widget in The Plus Addons for Elementor puts an interactive map on an Elementor page, with one pin per location, your own marker images and a block of text you can lay over the map.

It can draw that map in two ways. **Google Map** uses the Google Maps JavaScript API and needs a Google Maps API key. **Open Street Map (OSM)** uses OpenStreetMap tiles through Leaflet and needs no key and no account.

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/google-maps/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — the Google Map widget ships only with The Plus Addons for Elementor Pro. With the free plugin alone it is shown in the Elementor panel as a locked Pro widget and cannot be added to a page.- **Widget to enable:** Google Map, switched on under **The Plus Addons > Widgets** (search for it under **Essential**).- **Two map types:** **Google Map** needs a Google Maps API key, **Open Street Map (OSM)** needs none. You choose between them in **Layout > Map Type**.

## How to Add the Google Map Widget

- Go to **The Plus Addons > Widgets**, search for **Google Map** and switch it on. It sits in the **Essential** group and is badged **PRO**.

![The Plus Addons Widgets screen with the Google Map widget switched on](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-widgets-toggle.webp)

- Edit a page with Elementor, search the widget panel for **Google Map** and drag it onto the canvas.- Open **Layout > Map Type** and choose **Google Map** or **Open Street Map (OSM)**. The rest of the panel changes with this choice.

![Map Type dropdown in the Layout section, set to Google Map](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-map-type.webp)

> *The two map types do not share settings. Switching Map Type swaps the whole set of panel sections; the values you entered for the other type are kept but hidden.*

## Panel Sections

| Section | Shown when | What it holds |
| ------- | ---------- | ------------- |
| **Layout** | Always | **Map Type** |
| **Content** | Map Type is Google Map | **Add Multiple Location Point** and **Minimum Height** |
| **Map Style** | Map Type is Google Map | Zoom, map controls, map variation and the custom colour options |
| **Map Overlay** | Map Type is Google Map | A title and description block drawn over the map |
| **Extra Options** | Map Type is Google Map | Three switches for the pin tooltips and the WP Search Filter link-up |
| **Content Source** | Map Type is OSM | **Default Screen** and **Add Location Point** |
| **OSM Map Setting** | Map Type is OSM | Height, zoom, map controls and the tile layer |
| **OSM Polyline Setting** (Style tab) | Map Type is OSM | **Line Color** for the line that joins points |

## Google Map Settings

### Content

Each row of **Add Multiple Location Point** is one pin. A row holds **Latitude Value**, **Longitude Value**, **Address text for Tooltip**, a **Pin Icon** image and its **Image Resolution**.

![A location row open, showing Latitude Value and Longitude Value](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-locations.webp)

**Minimum Height** sets how tall the map area is, per device. The default is 400 px and the slider runs from 100 to 1000.

### Map Style

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Map Zoom** | How close the map starts, from 1 (whole world) to 25 | 15 |
| **Map Options** | Which Google controls the visitor gets: Scroll Wheel, Pan Control, Draggable, Zoom Control, Map Type Control, Scale Control, Full-screen Control, Street View Control, Marker Clustering | All of them except Marker Clustering |
| **Google Map Variations** | The look of the map: **ROADMAP**, **HYBRID**, **SATELLITE** or **TERRAIN** | ROADMAP |
| **Custom Style Maps** | Turns on the colour options below | Hide |
| **Creative Map Style** | One of seven ready-made colour schemes | Style 1 |
| **Modify Google Maps** | Replaces the ready-made scheme with your own **Hue**, **Saturation** and **Lightness** | Hide |

![The Map Options multi-select in the Map Style section, with its default entries](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-map-options.webp)

![Google Map Variations dropdown in the Map Style section, set to ROADMAP](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-variations.webp)

The seven **Creative Map Style** presets look like this.

![The seven Creative Map Style presets side by side](https://theplusaddons.com/wp-content/uploads/2023/02/google-map-style-preview.png)

Turning on **Modify Google Maps** replaces the preset with a hue, a saturation value and a lightness value of your own.

![Hue, Saturation and Lightness being changed on a map](https://theplusaddons.com/wp-content/uploads/2023/02/google-map-hue.gif)

### Map Overlay

**Content Over the Map** adds a panel with a **Title** and a **Description** on top of the map, plus a small toggle the visitor can use to fold it away. The rest of the section styles that panel: background, typography, **Title Color**, **Description Color**, **Toggle Button Color** and **Toggle Active Color**.

![Content Over the Map switched on, with the Title and Description fields](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-overlay.webp)

### Extra Options

| Setting | What it does |
| ------- | ------------ |
| **Override for WP Search Filter** | Connects the map to a WP Search Filter widget on the same page. It also makes the map call Google's Geocoding API for every pin, so the key needs that API enabled. |
| **Hide Title** | Drops the browser tooltip Google shows on a pin |
| **Content on Hover** | Opens the address bubble on hover instead of on click |

![The three switches in the Extra Options section](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-extra-options.webp)

> *Extra Options, Map Style and Map Overlay all belong to the Google Map map type. Because that map type does not draw on a published page in 6.5.0, the only place you can see what they do is the Elementor editor.*

## Open Street Map (OSM) Settings

With **Map Type** set to **Open Street Map (OSM)** the map is built from OpenStreetMap tiles. There is no key, no account and no billing.

### Content Source

**Default Screen** is where the map opens, written as latitude and longitude separated by a comma. Each row of **Add Location Point** is one point.

![The Content Source section with Default Screen and one location point](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-osm-default.webp)

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Layers Point** | What is drawn: **Marker**, **Circle** or **GeoJSON** | Marker |
| **Popup Type** | **Tooltip** shows the message on hover, **Popup** on click, **None** shows nothing | Tooltip |
| **Point Name** | The label this point gets in the layers box on the map | empty |
| **Latitude & Longitude** | The point's position, comma separated | 23.0225, 72.5714 |
| **Popup Message** | The text in the tooltip or popup | New York City |
| **Default ON** | Whether the point is drawn when the page opens. Switched off, it is still listed in the layers box so a visitor can switch it on. | Show |
| **Drawline Enable** | Joins this point to every other point that carries the same **Connection ID** | Default |
| **OSM Custom Image** | Your own marker image and its **Icon Size (Width, Height)** | Default |
| **GeoJSON Code** | A GeoJSON shape, used when Layers Point is GeoJSON. The tooltip text comes from the shape's own `properties.name`. | empty |

### OSM Map Setting

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Map Height** | Height of the map area, per device, 0 to 1000 px | 400 |
| **Zoom Level** | 1 (whole world) to 20 (street level) | 2 |
| **OSM Map Control** | Which controls the visitor gets: Collapsed Enable, Double Click Zoom, Map Dragging, Scroll Wheel Zoom, Scale Control Enable, Zoom Control | Zoom Control, Scroll Wheel Zoom, Map Dragging |
| **Collapsed Button** | Whether the layers box starts folded into a small icon. Only editable when **OSM Map Control** includes **Collapsed Enable**. | Show |
| **Default Tile Layer** | The tile URL the map draws from | `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png` |

![The OSM Map Setting section with Map Height, Zoom Level and OSM Map Control](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-osm-setting.webp)

This is three OSM points on a published page.

![Published page showing an OpenStreetMap map with three markers and the layers box](https://theplusaddons.com/wp-content/uploads/2026/09/gmaps-result-osm-multi.webp)

## How It Behaves

- **The map type decides everything else.** Content, Map Style, Map Overlay and Extra Options only exist for **Google Map**. Content Source, OSM Map Setting and OSM Polyline Setting only exist for **Open Street Map (OSM)**.- **OSM always adds a layers box** in the top right corner. It lists four base maps — **OSM**, **OSM.de**, **OSM.ch** and **OSM.Fr** — and, under them, every point by its **Point Name**, so a visitor can switch points on and off.- **Tooltip and popup are different actions.** With **Popup Type** set to **Tooltip** the message appears on hover; with **Popup** it appears on click.- **OSM keeps the attribution.** Every OSM map carries the "Leaflet | © OpenStreetMap contributors" credit in its bottom right corner.- **Only the OSM branch draws on a published page in 6.5.0.** See the limitations below.

## Limitations

- **Google Map map type, version 6.5.0:** a widget set to **Map Type > Google Map** draws in the Elementor editor but leaves an empty space on the published page, with `tp_map_gmap is not defined` in the browser console. This happens with or without a valid API key. **Open Street Map (OSM)** is not affected.- **The Google Maps script loads even for OSM:** while the Google Map widget is switched on under **The Plus Addons > Widgets**, the plugin adds Google's maps script to the page even when the widget is set to **Open Street Map (OSM)**. With no key saved, the browser console shows Google's *NoApiKeys* and *InvalidKey* warnings.- **OSM markers can be dragged.** When **Popup Type** is **Tooltip** or **None**, the marker is created as a draggable one, so a visitor can pull the pin away from its location. Setting **Popup Type** to **Popup** locks it in place.- **The first OSM point ignores its custom image.** With **Custom Image Enable** switched on, the first row of **Add Location Point** still shows the default marker; the second row onwards use the image. **Icon Size (Width, Height)** is applied to every row.- **Circle points are not styleable.** A point set to **Layers Point > Circle** draws in Leaflet's default blue at a fixed size. There are no colour or radius controls for it.- **Map Overlay belongs to the Google Map type only.** There is no equivalent for Open Street Map (OSM).

## Troubleshooting

### The map area is empty on the published page

Check **Layout > Map Type**. In version 6.5.0 a widget set to **Google Map** leaves an empty space on the front end even though it draws in the editor. Switch it to **Open Street Map (OSM)**, or wait for a fix.

### The editor shows a grey map that says "For development purposes only"

That is Google telling you the key is missing or not valid. Add a working key under **The Plus Addons > Extra Options > Settings > Google Map API**.

### The console shows "NoApiKeys" or "InvalidKey" on a page with no Google map

The plugin adds Google's maps script to the page whenever the Google Map widget is switched on, even when the widget is set to Open Street Map (OSM). Turn off **Google Map API** in the settings if you do not use the Google Map type.

### An OSM map shows the markers but no map behind them

The **Default Tile Layer** URL is not answering. Put it back to `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`.

## Related Docs

- [How to Add Multiple Location Pins in Elementor Google Maps?](https://theplusaddons.com/docs/elementor-google-maps-multiple-locations-pin/)- [How to add custom marker in Google Maps in Elementor?](https://theplusaddons.com/docs/elementor-google-maps-custom-marker/)- [How to add Text info overlay above Google Maps in Elementor?](https://theplusaddons.com/docs/elementor-google-maps-text-overlay/)- [How to generate Elementor Google Maps Widget API Key?](https://theplusaddons.com/docs/generate-elementor-google-maps-api-key/)

## Watch the Video

https://www.youtube.com/embed/NwY-Pt8q-6g

## Frequently Asked Questions

**Q: Why is my Google Map widget showing a blank area on the published page?**
A: In version 6.5.0, the Google Map map type draws in the Elementor editor but leaves an empty space on the published page. The page says this happens even with a valid API key, and the browser console can show `tp_map_gmap is not defined`. The practical workaround is to switch Layout > Map Type to Open Street Map (OSM) until the Google Map branch is fixed.

**Q: Does Elementor Google Maps work without a Google Maps API key?**
A: Open Street Map (OSM) works without any key or account because it uses OpenStreetMap tiles through Leaflet. Google Map is different: it uses the Google Maps JavaScript API and needs a Google Maps API key. That split matters because the widget changes its whole panel based on the selected map type, so the key requirement depends entirely on which branch you use.

**Q: How do I add multiple pins to an Elementor Google Maps widget?**
A: Each row in Add Multiple Location Point becomes one pin, and each pin can carry latitude, longitude, tooltip address text, a Pin Icon image, and its Image Resolution. That setup is useful when you need separate locations instead of one generic marker. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also links to a dedicated guide for multiple location pins: [How to Add Multiple Location Pins in Elementor Google Maps?](https://theplusaddons.com/docs/elementor-google-maps-multiple-locations-pin/).

**Q: What should I use for a custom marker in Elementor Google Maps?**
A: A custom marker is handled through the Pin Icon image inside each location row, so every pin can use its own image instead of the default marker. The page also notes that image resolution is part of that row, which matters if you want the marker to stay sharp at different sizes. For a deeper setup path, there is a related guide here: [How to add custom marker in Google Maps in Elementor?](https://theplusaddons.com/docs/elementor-google-maps-custom-marker/).

**Q: What are the best settings for an overlay on top of a Google map?**
A: Map Overlay is built for adding a Title and Description directly over the map, plus a small toggle so visitors can fold it away. That makes it better for short context than long copy, because it stays inside the map area instead of pushing content below it. The styling controls cover background, typography, Title Color, Description Color, Toggle Button Color and Toggle Active Color. There is also a related guide: [How to add Text info overlay above Google Maps in Elementor?](https://theplusaddons.com/docs/elementor-google-maps-text-overlay/).

**Q: Why does my OSM map show markers but no map behind them?**
A: That usually points to the Default Tile Layer URL not answering. The OSM branch expects `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, and if that tile source fails you can still see markers with no basemap underneath. The fix is to restore that URL in OSM Map Setting, since OSM depends on tiles even though it does not need an API key.