Error in IE8 using Google Maps “undefined is null or not an object”

Question

I have created a sample here to show the issue....

http://bit.ly/j2nb1k

The code is js so you can see it in full. In any modern browser including IE9 it works fine. But I get an annoying "undefined is null or not an object" if you load this in IE8 or below.

What am I missing here?

Source below...

var map;
  function initialize() {

    var latlng = new google.maps.LatLng(51, -1);
    var myOptions = {
      zoom: 2,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

   vaacinit();
  }

function vaacinit() {  
  var FL150 = [new google.maps.LatLng(-43.568055555556,75.833333333333),
new google.maps.LatLng(-59.384722222222,74.734722222222),
new google.maps.LatLng(-64.668055555556,88.25),
new google.maps.LatLng(-65.901388888889,133.58472222222),
new google.maps.LatLng(-59.35,131.23333333333),
new google.maps.LatLng(-55.918055555556,92.368055555556),
new google.maps.LatLng(-43.568055555556,75.833333333333),
];drawPoly(FL150,'#848484');
var FL200 = [new google.maps.LatLng(-54.7,90.533333333333),
new google.maps.LatLng(-60,158.23472222222),
new google.maps.LatLng(-59.333333333333,160.00138888889),
new google.maps.LatLng(-34.684722222222,160.58472222222),
new google.maps.LatLng(-40.5,150.5),
new google.maps.LatLng(-40.518055555556,145.86805555556),
new google.maps.LatLng(-38.2,144.7),
new google.maps.LatLng(-37,139.35),
new google.maps.LatLng(-35.85,129.33333333333),
new google.maps.LatLng(-39.333333333333,117.03472222222),
new google.maps.LatLng(-38.233333333333,110.06666666667),
new google.maps.LatLng(-29.418055555556,104.73333333333),
new google.maps.LatLng(-30.551388888889,90.501388888889),
new google.maps.LatLng(-54.7,90.533333333333),
];drawPoly(FL200,'#848484');
var well = [new google.maps.LatLng(-34.666666666667,160),
new google.maps.LatLng(-34.666666666667,172.38333333333),
new google.maps.LatLng(-40.568055555556,-160),
new google.maps.LatLng(-50.518055555556,-140.56805555556),
new google.maps.LatLng(-61.216666666667,-119.35138888889),
new google.maps.LatLng(-71.166666666667,-128.23472222222),
new google.maps.LatLng(-70.55,-150),
new google.maps.LatLng(-52.401388888889,-177.01805555556),
new google.maps.LatLng(-59.333333333333,160),
new google.maps.LatLng(-34.666666666667,160),
];drawPoly(well,'#848484');   





 }


function drawPoly(polyCoords,passedColor){

 var thisPoly;
 var thisPolyCoords = polyCoords;

 thisPoly = new google.maps.Polygon({
    paths: thisPolyCoords,
    strokeColor: passedColor,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: passedColor,
    fillOpacity: 0.35
  });

  thisPoly.setMap(this.map);

 }

Answer 1

Your arrays end in commas - which is not valid and will throw off versions of IE

For example, compare:

var notValidArray = [1,2,3,];

vs

var validArray = [1,2,3];