Find all products for your country

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

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.

United States Map on Elementor tabs

Difficulties with the integration of maps within the 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 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.

Useful articles

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

Popular articles


Recent Posts

Privacy policy   |   Terms of Use     Products  |  Showcase Gallery  |  Custom Design Service  |  Free Maps  |  Blog  |  Support  |  Contact
© 2006-2021 All Rights Reserved. - Interactive Maps for websites.
Follow us Follow us on Twitter Follow us on Facebook