[Resolved] Maps in Tabs (Ultimate Shortcode)

[Author]

Posts

[christopheV-2]

Hello,

I feel that the map does not work well when it is in a tabs

Why ?

Thanks

[Nigel]

Hi Christophe

I expect what you mean is that if the map is on the first tab (or whichever tab is "open" when the page loads) the map displays correctly, but when the map is on an initially-hidden tab then switching to that tab it appears that there is no map.

The problem is that the tab content is hidden initially, and—depending on how that is done—Google maps doesn't know how big to draw the map.

The solution is to re-draw the map when tabs are switched.

Try adding the following custom JS to where you insert the map in VC tabs:

( function( $ ) {
    $( document ).ready( function(){
  
        $('vc_tta-tab > a').on('click', function () {
 
            var timeoutID = window.setTimeout( function(){
                    WPViews.view_addon_maps.reload_map('map-1');
            }, 200 );
        });
    });
})( jQuery );

You may need to double-check the selector used to switch between tabs, the id of the map, and you may also have to lengthen the delay (200ms in the example) according to the speed of the animation of the tabs.