Maps not loading in 2nd, 3rd, et.c tabs

Permalink Browser Info Environment
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
plschneide
View Replies:
mesuva replied on at Permalink Reply
mesuva
Hi Paul,

thanks for this, John did make contact with me earlier regarding this and also supplied the solution/code. I will look to include this in the next version - in the meantime I won't be pushing up any updates that won't include this so you don't have to worry about code being overwritten.

Cheers
-Ryan
plschneide replied on at Permalink Reply
plschneide
Awesome thanks!

-----Original Message-----
From: concrete5 Community [mailto:[email protected]]
Sent: Sunday, October 1, 2017 6:26 PM
To: [email protected]
Subject: Maps not loading in 2nd, 3rd, et.c tabs : Support
admin replied on at Permalink Reply
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

concrete5 Environment Information

# concrete5 Version
Core Version - 8.2.1
Version Installed - 8.2.1
Database Version - 20170802000000

# concrete5 Packages
Location Map (1.0.6), Magic Tabs (7.1.2), Migration Tool (0.5.4), Quick Tabs (1.0), Responsive Embed (1.0.1), Responsive Theme (2.1.9), Zoomer (1.0.1)

# concrete5 Overrides
None

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache/2.4.23 (Unix) OpenSSL/1.0.1e-fips mod_bwlimited/1.4

# Server API
cgi-fcgi

# PHP Version
5.5.38

# PHP Extensions
bcmath, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, hash, iconv, imap, json, libxml, mbstring, mcrypt, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, pspell, Reflection, session, SimpleXML, sockets, SPL, sqlite3, standard, tokenizer, xml, xmlreader, xmlwriter, zip, zlib

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 1000
memory_limit - 128M
post_max_size - 120M
sql.safe_mode - Off
upload_max_filesize - 115M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:56.0) Gecko/20100101 Firefox/56.0

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.