Hi, I am using the Location Map and Magic Tabs. In some pages I have multiple maps on the same page under different Tabs, but the maps are not loading in another tab. I contacted the maker of the Magic Tabs and he indicated a timer/check needed to be added. This has been added in the core Google Map package, but not yet in Location Map.

Can you add this as an update to the app - don't want any changes I make overwritten when they make sense for the core product.

This is the info he communicated:
JavaScript that creates complex display elements often takes information from the visibility or dimensions of their containing DOM element. A consequence is that if they are first rendered inside a DOM element that is hidden they get the wrong information and have glitches in their display. A typical example is Google Maps, where a map will not render if its canvas area is hidden, such as on a tab that is initially closed.

The following solution is one that developers can use to unilaterally improve the rendering of a problematic JavaScript. The solution has been implemented in the core Google Maps block and some marketplace blocks since c5.6.1 and the same solution is carried through all the way to current core versions. However, not all affected third party blocks implement this, so you may need to create a block template (or remind the third party block developer that they need to update their block).

$(document).ready(function(){
var t;
var startWhenVisible = function (){
if ($('#id').is(':visible')){
window.clearInterval(t);
initialiseWhatever();
return true;
}
return false;
};
if (!startWhenVisible()){
t = window.setInterval(function(){startWhenVisible();},100);
}
});

In this example, initialiseWhatever() is the method that starts the JavaScript or JQuery plugin before this modification, such as initialising Google Maps. You can see this in action in the view.php for the core Google Maps block.

If the containing DOM is visible ('#id'), it is run straight away. There is no appreciable overhead or change to the way the plugin works.

If not, a polling event is started to run every 100ms (a reasonable value that many users won't even notice), and the JavaScript or jQuery started when its container becomes visible. An important part to never forget is to clear the timer when the plugin is started window.clearInterval(t).

If the script is not using jQuery, the equivalent in pure JavaScript is:

window.onload = function() {
var t;
var elem;
var startWhenVisible = function (){
elem = document.getElementById('id');
if (elem.offsetWidth > 0 || elem.offsetHeight > 0){
window.clearInterval(t);
initialiseWhatever();
return true;
}
return false;
};
if (!startWhenVisible()){
t = window.setInterval(function(){startWhenVisible();},100);
}
}

Type:	Ticket
Status:	Archived