Find all products for your country

HomeBlog

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

Intro

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 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.

Custom JS for Elementor tabs

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.

Useful articles

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

Useful articles

Categories

Recent Posts

Archives

Tags


Privacy policy   |   Terms of Use

Home  |   Products  |   Showcase Gallery  |   Custom Design Service  |   Free Maps  |   Blog  |   Support  |   Contact
© 2006-2019 All Rights Reserved.
Fla-shop.com - Interactive Maps for websites.
Follow us Follow us on Twitter Follow us on Facebook