How to Add Text Info Overlay Above Google Maps in Elementor

Have you ever wanted to display extra information directly on your Google Maps in Elementor, but struggled to find a simple, elegant way to do it?

Maybe you want to highlight your business hours, offer a special promotion, or simply add contact details right on the map. 

Without the right tools, adding this kind of overlay can be frustrating and time-consuming, often requiring custom code or complicated workarounds.

With The Plus Addons for Elementor, you can easily add a text info overlay above your Google Maps without any coding! 

This feature lets you display custom messages, images, or even HTML content directly on your map, providing users with all the information they need at a glance.

Table Of Content

Step-by-Step: Adding a Text Overlay to Google Maps in Elementor

1. Install The Plus Addons for Elementor

First, make sure you have The Plus Addons for Elementor installed and activated on your WordPress site. This widget is part of their premium toolkit, unlocking powerful map features.

2. Add the Google Map Widget

Drag and drop the Google Map widget from The Plus Addons onto your Elementor page.

3. Enable the Map Overlay Feature

In the widget settings, navigate to the Map Overlay section.

Find the Content Over the Map option and toggle it on. 

This will add a toggle button directly on your map, allowing users to reveal or hide your overlay content.

4. Customize Your Overlay Content

  • Use the Title field to add a headline for your overlay.
  • Enter your details in the Description field. You can even use HTML here to include images, links, or styled text for richer content.

5. Style Your Overlay 

Personalize your overlay by adjusting the background, typography, and colors for both the title and description. You can also change the toggle button color to match your site’s branding.

6. Publish and Preview 

Once you’re happy with your overlay, publish the page and preview it. 

You’ll see your custom overlay displayed beautifully above your Google Map, ready to provide users with valuable information.

Wrapping Up

Adding a text info overlay to your Google Maps in Elementor is now easier than ever with The Plus Addons. 

You can present key details, images, or even special offers right on your map-enhancing user experience and engagement. 

Don’t let your map be just a map; transform it into an interactive information hub for your visitors!