Showing hidden maps

When you show a hidden map (for example, map in a tab) it may appear blurry, with thick borders, with wrong size or misplaced markers.

You have to call the .redraw() method when a hidden tab is shown (or when you show a map in any other way) to fix that.

Examples:

jQuery('#mapsvg-123').mapSvg().redraw(); // redraw the map with ID "123"    
MapSVG.get(0).redraw(); // redraw the first map on the page
MapSVG.get(1).redraw(); // redraw the second map on the page

Visual composer tabs

Add the following code to the Menu > JavaScript > afterLoad event handler of the first map only:

function(){
    jQuery('.vc_tta-tab a').on('click', function(){ 
        setTimeout(function(){ 
            jQuery('.mapsvg:visible').each(function(i,el){ 
                jQuery(el).mapSvg().redraw(); 
            }); 
        },200); 
    });
}

Visual composer accordion

Add the following code to the Menu > JavaScript > afterLoad event handler of the first map only:

function(){
    jQuery('.vc_tta-panel a').on('click', function(){ 
        setTimeout(function(){ 
            jQuery('.mapsvg:visible').each(function(i,el){ 
                jQuery(el).mapSvg().redraw(); 
            }); 
        },200); 
    });
}

Elementor tabs

Add the following code to the Menu > JavaScript > afterLoad event handler of the first map only:

function(){
    jQuery('.elementor-tabs a').on('click', function(){ 
        setTimeout(function(){ 
            jQuery('.mapsvg:visible').each(function(i,el){ 
                jQuery(el).mapSvg().redraw(); 
            }); 
        },200); 
    });
}

Other tabs

Inspect your tabs using the browser developer tools. You need to find the class name of the parent tab container:

1

In the screenshot above the parent tab element has the et-pb-tabs class. And tab items look like <li><a>Tab item</a></li>.

Add the following code to the Menu > JavaScript > afterLoad event handler of the first map only:

function(){
    jQuery('.et-pb-tabs a').on('click', function(){
        setTimeout(function(){ 
            jQuery('.mapsvg:visible').each(function(i,el){ 
                jQuery(el).mapSvg().redraw(); 
            }); 
        },200);     
    });
}