Uncaught RangeError: Invalid array length in Chrome version 36.0.1985.5 dev -m

Question

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.

Answer 1

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.