[Resolved] Maps not showing properly in Divi tabs

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This thread is resolved. Here is a description of the problem and solution.

Problem:
When adding Google Maps in tabs where the map is not in the first tab so that it is initially hidden, opening the tab which contains the map shows a placeholder for the map which is not actually rendered

Solution:
You need to add the following Javascript to re-initialise the map once the tab has been selected (be sure to edit the map id):

( 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 );

Note that this solution is specifically for Divi tabs. The same problem arises with Bootstrap tabs, but there the solution is simpler: https://toolset.com/forums/topic/google-map-not-working-in-a-tabbed-interface/

This topic contains 4 replies, has 2 voices.

Last updated by Tim Elliott 1 year, 10 months ago.

Assigned support staff: Nigel.

Author
Posts
#516716

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

#516816

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00: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 );
#516859

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

#516924

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00: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 );
#516968

Fantastic. Thanks very much for you help.