javascript - Uncaught RangeError: Invalid array length in Chrome version 36.0.1985.5 dev -m -
i have google map api setup here, , google chrome throw 'uncaught rangeerror: invalid array length'.
here code in question:
var map; var phoenix = new google.maps.latlng(33.551946,-112.109985); var locone = new google.maps.latlng(33.541061,-112.293369); var loctwo = new google.maps.latlng(33.37738,-111.833271); var locthree = new google.maps.latlng(33.454742,-112.099701); var locfour = new google.maps.latlng(33.673617,-112.020856); function homecontrol (controldiv, map){ // create div hold controls var controldiv = document.createelement('div'); controldiv.class = 'gmnoprint'; controldiv.style.margintop = '5px'; controldiv.index = 1; // set css control border var controlui = document.createelement('div'); controlui.id = 'border'; controlui.style.backgroundcolor = '#fff'; controlui.style.cursor = 'pointer'; controlui.textalign = 'center'; controlui.title = 'click reset map'; controldiv.appendchild(controlui); // set css control interior var controltext = document.createelement('div'); controltext.id = 'reset'; controltext.style.fontfamily = 'arial,sans-serif'; controltext.style.fontsize = '13px'; controltext.innerhtml = '<b>reset map</b>'; controlui.appendchild(controltext); // create div hold controls locations var controllocdiv = document.createelement('div'); controllocdiv.class = 'gmnoprint'; controllocdiv.style.margintop = '5px'; controllocdiv.style.marginright = '5px'; controllocdiv.index = 1; // set css control border var controlwestui = document.createelement('div'); controlwestui.id = 'border'; controlwestui.style.backgroundcolor = '#fff'; controlwestui.style.cursor = 'pointer'; controlwestui.textalign = 'center'; controlwestui.title = 'click set map west valley'; controllocdiv.appendchild(controlwestui); // set css control interior var controlwesttext = document.createelement('div'); controlwesttext.id = 'west'; controlwesttext.style.fontfamily = 'arial,sans-serif'; controlwesttext.style.fontsize = '13px'; controlwesttext.style.paddingright = '5px'; controlwesttext.style.paddingleft = '5px'; controlwesttext.innerhtml = '<div>west valley</div>'; controlwestui.appendchild(controlwesttext); // set css control border var controleastui = document.createelement('div'); controleastui.id = 'border'; controleastui.style.backgroundcolor = '#fff'; controleastui.style.cursor = 'pointer'; controleastui.textalign = 'center'; controleastui.title = 'click set map east valley'; controllocdiv.appendchild(controleastui); // set css control interior var controleasttext = document.createelement('div'); controleasttext.id = 'east'; controleasttext.style.fontfamily = 'arial,sans-serif'; controleasttext.style.fontsize = '13px'; controleasttext.style.paddingright = '5px'; controleasttext.style.paddingleft = '5px'; controleasttext.innerhtml = '<div>east valley</div>'; controleastui.appendchild(controleasttext); // set css control border var controldowntownui = document.createelement('div'); controldowntownui.id = 'border'; controldowntownui.style.backgroundcolor = '#fff'; controldowntownui.style.cursor = 'pointer'; controldowntownui.textalign = 'center'; controldowntownui.title = 'click set map downtown phoenix'; controllocdiv.appendchild(controldowntownui); // set css control interior var controldowntowntext = document.createelement('div'); controldowntowntext.id = 'downtown'; controldowntowntext.style.fontfamily = 'arial,sans-serif'; controldowntowntext.style.fontsize = '13px'; controldowntowntext.style.paddingright = '5px'; controldowntowntext.style.paddingleft = '5px'; controldowntowntext.innerhtml = '<div>downtown phoenix</div>'; controldowntownui.appendchild(controldowntowntext); // set css control border var controlnorthui = document.createelement('div'); controlnorthui.id = 'border'; controlnorthui.style.backgroundcolor = '#fff'; controlnorthui.style.cursor = 'pointer'; controlnorthui.textalign = 'center'; controlnorthui.title = 'click set map north phoenix'; controllocdiv.appendchild(controlnorthui); // set css control interior var controlnorthtext = document.createelement('div'); controlnorthtext.id = 'north'; controlnorthtext.style.fontfamily = 'arial,sans-serif'; controlnorthtext.style.fontsize = '13px'; controlnorthtext.style.paddingright = '5px'; controlnorthtext.style.paddingleft = '5px'; controlnorthtext.innerhtml = '<div>north phoenix</div>'; controlnorthui.appendchild(controlnorthtext); // setup click event listeners: click reset map google.maps.event.adddomlistener(controlui, 'click', function() { map.setcenter(phoenix); map.setzoom(10); }); map.controls[google.maps.controlposition.top_right].push(controldiv); map.controls[google.maps.controlposition.right].push(controllocdiv); //setup click event listeners: click set position west phoenix google.maps.event.adddomlistener(controlwestui, 'click', function() { map.panto(locone); map.setzoom(14); }); //setup click event listeners: click set position east phoenix google.maps.event.adddomlistener(controleastui, 'click', function() { map.panto(loctwo); map.setzoom(14); }); //setup click event listeners: click set position downtown phoenix google.maps.event.adddomlistener(controldowntownui, 'click', function() { map.panto(locthree); map.setzoom(14); }); //setup click event listeners: click set position north phoenix google.maps.event.adddomlistener(controlnorthui, 'click', function() { map.panto(locfour); map.setzoom(14); }); } function initialize() { var mapdiv = document.getelementbyid('map_canvas1'); var mylatlng1 = new google.maps.latlng(33.523103,-112.042593); var map_options1 = {center: mylatlng1,zoom: 10,scrollwheel: false,zoomcontrol: true,zoomcontroloptions: {style: google.maps.zoomcontrolstyle.large},maptypecontroloptions: {style: google.maps.maptypecontrolstyle.horizontal_bar,position: google.maps.controlposition.top_right},maptypeid: google.maps.maptypeid.roadmap}; map = new google.maps.map(mapdiv, map_options1); setmarkers(map, locations); //create div hold control //call homecontrol() constructor passing //in div. var homecontroldiv = document.createelement('div'); var homecontrol = new homecontrol(homecontroldiv, map); homecontroldiv.index = 1; map.controls[google.maps.controlposition.top_right].push(homecontroldiv); } var locations = [['west valley', 33.541061,-112.293369],['east valley', 33.37738,-111.833271],['downtown phoenix', 33.454742,-112.099701],['north phoenix', 33.673617,-112.020856]]; function setmarkers(map, locations){ var icon = { url: 'http://www.bpisite.com/ico/bpi2.png', size: new google.maps.size(52, 36), origin: mylatlng, anchor: mylatlng }; var shadow = { url: 'http://www.bpisite.com/ico/bpi2_shadow.png', size: new google.maps.size(72, 36), origin: mylatlng, anchor: mylatlng }; (var in locations) { var loc = locations[i]; var mylatlng = new google.maps.latlng(loc[1], loc[2]); var marker = new google.maps.marker({ position: mylatlng, map: map, icon: icon, shadow: shadow, title: loc[0], zindex: loc[3] }); marker.setmap(map); attachlistener(marker, 'marker:'+1); } function attachlistener(marker){ google.maps.event.adddomlistener(marker, 'click', function() { window.settimeout(function() { map.panto(marker.getposition()); }, 500); window.settimeout(function() { map.setzoom(16); }, 1000); }); } } google.maps.event.adddomlistener(window, 'load', initialize); it seems load icons , custom buttons have set up. map work normal, draggable, , scroll-able via double-clicking, entire ui hidden.
this code has worked fine in earlier versions of chrome, whatever reason, new update has messed code.
the problem not code. it's bug in google maps api/chrome.
here problem: if try define array integer, there won't problem
var arr = array(50);
but, if define array float, error
var arr = array(50.5); // => uncaught rangeerror: invalid array length
this because chrome started calculate width , height float instad of integer, therefore, after use in array exception trown. see more explanation here
most used percentage width/height of container such
map_canvas1{ width: 100%; height: 80%; } now, try using pixels
map_canvas1{ width: 500px; height: 300px; } and see if works.
Comments
Post a Comment