Javascript errors causings maps to break in Chrome & IE WordPress
- SOLVED
I am currently developing the pro version of my mapping plugin mapsmarker.com for which I removed need for jquery on frontend. I now noticed that if there is more than one maps on the page (see http://pro.mapsmarker.com), the second map is not displayed in Chrome and Internet Explorer - with Firefox all maps are displayed without error messages in the console though :-/
Here is the error from Google Chrome console:
Uncaught TypeError: Cannot call method 'invalidateSize' of undefined pro.mapsmarker.com:520
lmm_resizeMap pro.mapsmarker.com:520
(anonymous function)
Here the error from Internet Explorer (8):
Error: 'lmm_map_4aee0872' is Null or not an object
Zeile: 520
Zeichen: 1
Code: 0
When displaying a standalone map in IE8 (http://pro.mapsmarker.com/?p=11), I also get the following js error (but map displays correctly):
Unknown runtime error
Zeile: 238
Zeichen: 6
Code: 0
As I am still trying to improve my js knowledge, any hint for fixing these js errors is highly appreciated here!
thx!
Answers (1)
Christianto answers:
Hi Robert,
I think these redefine function causing that error, it's repeated for each maps
function lmm_resizeMap() {
if( document.getElementById('lmm_0d401c8c').parentNode.offsetWidth < 640 ) {
document.getElementById('lmm_0d401c8c').style.width = '100%';
lmm_map_0d401c8c.invalidateSize();
}
}
lmm_resizeMap();
function lmm_addEditLink() {
var boundingbox = lmm_map_0d401c8c.getBounds().toBBoxString();
if ( document.getElementById('editlink_0d401c8c') != undefined ) {
var editlink = document.getElementById('editlink_0d401c8c').innerHTML;
document.getElementById('editlink_0d401c8c').innerHTML=editlink +' (<a href="http://www.openstreetmap.org/edit?editor=potlatch2&bbox='+boundingbox+'" target="_blank" title="help OpenStreetMap.org to improve map details">edit</a>)';
}
}
lmm_addEditLink();
I test it on from my chrome/iron browser console with that condition and it result in error,
But if I define both function only one time and passing some parameter needed (id and leaflet object), it work ( run from console )..
function lmm_resizeMap(id, leaf_o) {
if( document.getElementById(id).parentNode.offsetWidth < 640 ) {
document.getElementById(id).style.width = '100%';
leaf_o.invalidateSize();
}
}
function lmm_addEditLink(id, leaf_o) {
var boundingbox = leaf_o.getBounds().toBBoxString();
if ( document.getElementById(id) != undefined ) {
var editlink = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML=editlink +' (<a href="http://www.openstreetmap.org/edit?editor=potlatch2&bbox='+boundingbox+'" target="_blank" title="help OpenStreetMap.org to improve map details">edit</a>)';
}
}
and called the function:
lmm_resizeMap('lmm_d6abb955',lmm_map_d6abb955);
lmm_addEditLink('editlink_d6abb955', lmm_map_d6abb955);
I check the last map lmm_resizeMap() function a bit different, so you might need to define different function.
Robert Seyfriedsberger comments:
Hi Christianto,
thanks for your answer - I changed the lmm_resizeMap function as you described on http://pro.mapsmarker.com - here´s the code:
if ( ($mapwidthunit != '%') && ($lmm_options['misc_responsive_support'] == 'enabled') ) {
$lmmjs_out .= "function lmm_resizeMap(id, leaf_o) {
if( document.getElementById(id).parentNode.offsetWidth < ".$mapwidth." ) {
document.getElementById(id).style.width = '100%';".PHP_EOL;
if ($listmarkers == 1) {
$lmmjs_out .= "document.getElementById('lmm-listmarkers-".$uid."').style.width = '100%';".PHP_EOL;
$lmmjs_out .= "document.getElementById('lmm-listmarkers-table-".$uid."').style.width = '100%'; ".PHP_EOL;
}
$lmmjs_out .= "leaf_o.invalidateSize();
}
}
lmm_resizeMap('lmm_".$uid."', '".$mapname."');".PHP_EOL;
}
Doesnt work unfortunately. Now I am getting the error "TypeError: leaf_o.invalidateSize is not a function".
Any idea why?
Christianto comments:
The function still repeating for each maps, like:
...maps 1...
................
................
function lmm_resizeMapx(id, leaf_o) {
if( document.getElementById(id).parentNode.offsetWidth < 640 ) {
document.getElementById(id).style.width = '100%';
leaf_o.invalidateSize();
}
}
lmm_resizeMapx('lmm_94492af5', 'lmm_map_94492af5');
function lmm_addEditLink() {
var boundingbox = lmm_map_94492af5.getBounds().toBBoxString();
if ( document.getElementById('editlink_94492af5') != undefined ) {
var editlink = document.getElementById('editlink_94492af5').innerHTML;
document.getElementById('editlink_94492af5').innerHTML=editlink +' (<a href="http://www.openstreetmap.org/edit?editor=potlatch2&bbox='+boundingbox+'" target="_blank" title="help OpenStreetMap.org to improve map details">edit</a>)';
}
}
lmm_addEditLink();
.......
.......
.......
...maps 2 code..
........
........
........
function lmm_resizeMapx(id, leaf_o) {
if( document.getElementById(id).parentNode.offsetWidth < 640 ) {
document.getElementById(id).style.width = '100%';
document.getElementById('lmm-listmarkers-aae5331f').style.width = '100%';
document.getElementById('lmm-listmarkers-table-aae5331f').style.width = '100%';
leaf_o.invalidateSize();
Uncaught TypeError: Object lmm_map_09a65e4e has no method 'invalidateSize'
}
}
lmm_resizeMapx('lmm_aae5331f', 'lmm_map_aae5331f');
function lmm_addEditLink() {
var boundingbox = lmm_map_aae5331f.getBounds().toBBoxString();
if ( document.getElementById('editlink_aae5331f') != undefined ) {
var editlink = document.getElementById('editlink_aae5331f').innerHTML;
document.getElementById('editlink_aae5331f').innerHTML=editlink +' (<a href="http://www.openstreetmap.org/edit?editor=potlatch2&bbox='+boundingbox+'" target="_blank" title="help OpenStreetMap.org to improve map details">edit</a>)';
}
}
lmm_addEditLink();
.....
you need to define it one time somewhere before 1st maps code:
function lmm_resizeMap(id, leaf_o) {
if( document.getElementById(id).parentNode.offsetWidth < 640 ) {
document.getElementById(id).style.width = '100%';
leaf_o.invalidateSize();
}
}
function lmm_addEditLink(id, leaf_o) {
var boundingbox = leaf_o.getBounds().toBBoxString();
if ( document.getElementById(id) != undefined ) {
var editlink = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML=editlink +' (<a href="http://www.openstreetmap.org/edit?editor=potlatch2&bbox='+boundingbox+'" target="_blank" title="help OpenStreetMap.org to improve map details">edit</a>)';
}
}
and use the function for each maps loop instead of redefine it:
...map 1...
.......
.......
lmm_resizeMap('lmm_d6abb955', lmm_map_94492af5);
lmm_addEditLink('editlink_94492af5', lmm_map_94492af5);
.......
....map 2 code....
.......
.......
lmm_resizeMap('lmm_aae5331f', lmm_map_aae5331f);
lmm_addEditLink('editlink_aae5331f', lmm_map_aae5331f);
Also the second argument we pass map object to the function,
so no need to add double quote/apostrophe
lmm_resizeMapx('lmm_aae5331f', 'lmm_map_aae5331f');
to
lmm_resizeMap('lmm_aae5331f', lmm_map_aae5331f);
Robert Seyfriedsberger comments:
Ah - now I got it. I added the unique map id to each function name (as adding function once would have been much more complicated) and now it works. Thanks!