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.
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.
- 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.
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.
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 seven Creative Map Style presets look like this.
Turning on Modify Google Maps replaces the preset with a hue, a saturation value and a lightness value of your own.
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.
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 |
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.
| 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 |
This is three OSM points on a published page.
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 definedin 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?
- How to add custom marker in Google Maps in Elementor?
- How to add Text info overlay above Google Maps in Elementor?
- How to generate Elementor Google Maps Widget API Key?
Watch the Video
