A map on its own tells a visitor where you are, but not much else. The Google Map widget in The Plus Addons for Elementor can lay a small block of text over the map — an address, opening hours, a note about parking — with a toggle the visitor can use to fold it away.
The setting is Content Over the Map, in the widget’s Map Overlay section.
To check the complete feature overview documentation of The Plus Addons for Elementor Google Map widget, click here.
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.
- API key: the Google Map map type only draws once a Google Maps API key is saved under The Plus Addons > Extra Options > Settings > Google Map API. See How to generate Elementor Google Maps Widget API Key?.
- Google Map map type only: Map Overlay is hidden when Layout > Map Type is set to Open Street Map (OSM).
Add a Text Overlay
- Select the Google Map widget and make sure Layout > Map Type is Google Map.
- Open Map Overlay and switch Content Over the Map on.
- Type a heading into Title and the rest of the text into Description.
- Style the block with the controls underneath: the background group, Title Typography, Title Color, Description Typography and Description Color.
- Set the colours of the fold-away control with Toggle Button Color and Toggle Active Color.
In use, the overlay sits on the map and the small toggle folds it in and out.
Settings
| Setting | What it does | Default |
|---|---|---|
| Content Over the Map | Shows or hides the whole overlay block | Hide |
| Title | The heading line of the block | Location Here |
| Description | The body text. HTML you type here is kept. | A paragraph of placeholder text |
| Background Type | A classic or gradient background for the block | not set |
| Title Color | Colour of the heading line | #fff |
| Description Color | Colour of the body text | #fff |
| Toggle Button Color | The fold-away control at rest | rgba(0, 0, 0, 0.4) |
| Toggle Active Color | The fold-away control once clicked | #81d742 |
How It Behaves
- The overlay starts open. The block is drawn on top of the map when the page loads; the visitor clicks the toggle to fold it away and again to bring it back.
- HTML in the Description is kept. Tags allowed in a WordPress post, such as
<strong>,<br>and<a>, come through to the page. Script tags and similar are stripped. - Title and Description are styled separately. Each has its own typography group and its own colour.
- The default colours are white. On a light map variation the text will not be readable until you set a background or change the colours.
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 overlay block itself is written to the page, but it sits over an empty area rather than a map. - No overlay for Open Street Map. The section only exists on the Google Map map type.
- One overlay per widget, in a fixed position. There is no control for where on the map it sits.
- The toggle has no label. It is a small unlabelled control, so a visitor has to discover it.
Troubleshooting
I cannot find the Map Overlay section
Check Layout > Map Type. Map Overlay is hidden while the widget is set to Open Street Map (OSM).
The overlay text is invisible
Title Color and Description Color both default to white. Give the block a background under Background Type, or set darker text colours.
The overlay is there but the map is not
In version 6.5.0 a widget set to Map Type > Google Map does not draw its map on the published page, even though the overlay block does render. The map still draws in the Elementor editor.
