[Resuelto] Maps not showing properly in Divi tabs

[Autor]

Mensajes

[Tim Elliott]

I am trying to: Display a toolset map inside a Divi tab within a view

I visited this URL: hidden link

I expected to see: In the Location tab the map should render

Instead, I got: grey map - not rendered properly as Google Maps can not be initialized on hidden containers

I've seen this support thread with a similar problem:
https://toolset.com/forums/topic/maps-not-showing-properly-in-tabs/

I'm not sure how to adapt the code for the Divi tab.

Any help appreciated
Thanks
Tim

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Tim

The issue is that Google Maps cannot be initialised on a hidden element, and if you are using Bootstrap tabs then the solution is trivial and involves adding a few lines of CSS (https://toolset.com/forums/topic/google-map-not-working-in-a-tabbed-interface/#post-509316).

Unfortunately, the Divi tabs use JavaScript to directly set styles on the tabs (rather than just change the class of the active tab, as Bootstrap does), so you will need to employ some JavaScript yourself.

Divi doesn't appear to assign unique classes or ids to the tabs, but in your specific case we can use the fact that the map is in the last tab to select it.

Try adding the following custom JS to the page. Looking at your page it appears that your map id is 2, but if not you will need to edit map-2 accordingly.

( function( $ ) {
	$( document ).ready( function(){

		$('.et_pb_tabs_controls > li:last').on('click', function () {
		    WPViews.view_addon_maps.reload_map('map-2');
		});
	});
})( jQuery );

[Tim Elliott]

Hi Nigel

Thanks for your assistance. It nearly works :-/
Now when you click on the tab it still come out as the grey map. If you click on the tab again whilst it's already selected the map then loads. Presumably the first time you click on it the tab contents are still hidden so Google Maps still won't load. Then you click again and they aren't hidden so it loads.

I've added a "maptab" class to the tab selector and "maptabcontents" to the tab contents so I can select on the class instead of ":last".

( function( $ ) {
    $( document ).ready( function(){
 
        $('.et_pb_tabs_controls > li.maptab').on('click', function () {
            WPViews.view_addon_maps.reload_map('map-2');
        });
    });
})( jQuery );

Any idea how to make it load on a single click though?

Thanks
Tim

[Nigel Supporter Languages: Inglés (English ) Español (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Tim

The animation of the tab seems to be the problem, we need to wait for that to finish before re-initialising the map.

In testing I found we need to wait 600ms, so you can modify your code like so:

( function( $ ) {
    $( document ).ready( function(){
 
        $('.et_pb_tabs_controls > li.maptab').on('click', function () {

        	var timeoutID = window.setTimeout( function(){
            		WPViews.view_addon_maps.reload_map('map-2');
        	}, 600 );
        });
    });
})( jQuery );

[Tim Elliott]

Fantastic. Thanks very much for you help.