Uncaught RangeError: Invalid array length in Chrome version 36.0.1985.5 dev -m
google-chrome, google-maps, javascript
Solution
The problem is not about your code. It's a bug in google maps api/chrome.
Here is the problem: if you try to define an array with an integer, there won't be a problem
`var arr = Array(50);`
but, if you define an array with a float, you will get this error
`var arr = Array(50.5); // => Uncaught RangeError: Invalid array length`
This is because chrome started to calculate `width` and `height` as float instad of integer, therefore, after they use it in an array that exception is trown. See more explanation here
Most probably you used a percentage for width/height of the container such as
map_canvas1{
width: 100%;
height: 80%;
}
Now, try using pixels
map_canvas1{
width: 500px;
height: 300px;
}
and see if it works.
Problem
I have a google Map API setup Here, and only Google Chrome will throw an 'Uncaught RangeError: Invalid array length'. Here is the 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 to hold the controls var controlDiv = document.createElement('div'); controlDiv.class = 'gmnoprint'; controlDiv.style.marginTop = '5px'; controlDiv.index = 1; // set CSS for the control border var controlUI = document.createElement('div'); controlUI.id = 'border'; controlUI.style.backgroundColor = '#fff'; controlUI.style.cursor = 'pointer'; controlUI.textAlign = 'center'; controlUI.title = 'Click to reset the map'; controlDiv.appendChild(controlUI); // set CSS for 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 to hold the controls for the locations var controlLocDiv = document.createElement('div'); controlLocDiv.class = 'gmnoprint'; controlLocDiv.style.marginTop = '5px'; controlLocDiv.style.marginRight = '5px'; controlLocDiv.index = 1; // set CSS for the control border var controlWestUI = document.createElement('div'); controlWestUI.id = 'border'; controlWestUI.style.backgroundColor = '#fff'; controlWestUI.style.cursor = 'pointer'; controlWestUI.textAlign = 'center'; controlWestUI.title = 'Click to set the map to West Valley'; controlLocDiv.appendChild(controlWestUI); // set CSS for 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 for the control border var controlEastUI = document.createElement('div'); controlEastUI.id = 'border'; controlEastUI.style.backgroundColor = '#fff'; controlEastUI.style.cursor = 'pointer'; controlEastUI.textAlign = 'center'; controlEastUI.title = 'Click to set the map to East Valley'; controlLocDiv.appendChild(controlEastUI); // set CSS for 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 for the control border var controlDowntownUI = document.createElement('div'); controlDowntownUI.id = 'border'; controlDowntownUI.style.backgroundColor = '#fff'; controlDowntownUI.style.cursor = 'pointer'; controlDowntownUI.textAlign = 'center'; controlDowntownUI.title = 'Click to set the map to Downtown Phoenix'; controlLocDiv.appendChild(controlDowntownUI); // set CSS for 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 for the control border var controlNorthUI = document.createElement('div'); controlNorthUI.id = 'border'; controlNorthUI.style.backgroundColor = '#fff'; controlNorthUI.style.cursor = 'pointer'; controlNorthUI.textAlign = 'center'; controlNorthUI.title = 'Click to set the map to North Phoenix'; controlLocDiv.appendChild(controlNorthUI); // set CSS for 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 to 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 to set position to West Phoenix google.maps.event.addDomListener(controlWestUI, 'click', function() { map.panTo(locOne); map.setZoom(14); }); //setup click event listeners: click to set position to East Phoenix google.maps.event.addDomListener(controlEastUI, 'click', function() { map.panTo(locTwo); map.setZoom(14); }); //setup click event listeners: click to set position to Downtown Phoenix google.maps.event.addDomListener(controlDowntownUI, 'click', function() { map.panTo(locThree); map.setZoom(14); }); //setup click event listeners: click to set position to 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 to hold control //Call the HomeControl() constructor passing //in this 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 }; for (var i 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 to load everything but the icons and custom buttons I have set up. The map will work like normal, draggable, and scroll-able via double-clicking, but the entire UI is hidden. This code has worked just fine in earlier versions of Chrome, but for whatever reason, this new update has messed up the code.