How to insert a responsive map in Tabs by Elementor Page Builder

In this article, you can find a solution for the successful integration of interactive maps in your WordPress website within Tabs created with Elementor Page Builder.


Difficulties with integrating maps into tabs

Our interactive maps are very simple and functional plugins for publishing maps on WordPress sites. Inserting maps into a post, page, or widget is very simple and is done via a shortcode. However, sometimes there are complex integrations when the map needs to be inserted inside the tabs or in the drop-down menu, etc.

United States Map on Elementor tabs

Elementor, a popular page builder for WordPress, is also compatible with our maps and you can simply insert a shortcode into a typical section or page in Elementor for the map to appear. However, if you insert a map inside the tabs, the map will not be displayed properly as it does not automatically resize in the tab section.

How to solve this problem?

Map plugins by have an API, and the plugin interface has a field for inserting custom JS code.
Copy the following code, and paste it into the Tools tab in the map settings.

setTimeout (function () { map.reloadMap(); }, 10);

var parents = jQuery('#'+containerId).parentsUntil('.elementor-tab-content');
var tabContainer = null;
if (parents.length) {
    var last = parents[parents.length - 1];
    if (jQuery(last).parent() && last != document.firstElementChild) {
        tabContainer = jQuery(last).parent()[0];

var reloadDone = false;

if (! tabContainer)
tabContainer = jQuery(tabContainer);
var tabId ='tab');

var clickCallback = function () {
    if (reloadDone) return;
    setTimeout(function () {
        reloadDone = true;
    }, 10);

var  tab = tabContainer.parentsUntil('.elementor-widget-container').find('[role=tab][data-tab='+tabId+']');
tab.on('click', clickCallback);
jQuery(window).resize(function () { reloadDone = false; });

You can also find this code on
The following screenshot shows exactly where to insert the code.

Custom JS for Elementor tabs

It’s all! The code is universal and suitable for any locator map by – World map, U.S. map, maps of other countries.

Related Posts