How to insert a responsive map in Tabs by 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.

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 Fla-shop.com 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)
    return;
tabContainer = jQuery(tabContainer);
var tabId = tabContainer.data('tab');

var clickCallback = function () {
    if (reloadDone) return;
    setTimeout(function () {
        map.reloadMap();
        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 pastebin.com
The following screenshot shows exactly where to insert the code.

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

Try a fully functional map of the U.S. for WP