Google Maps，“为null或不是对象”和IE8

Question

So, i have a Google Maps map in a web site i'm creating and everything runs great in every browser, except for… IE8. In IE8 the browser simply stops reading the JS file when he encounters the first variable declaration and it gives the error i mentioned in the subject. It doesn't load the map neither any function bellow the error.

It's always in the same variable, which means that if i change the code it will always stuck in that part.

So the code is the following:

var monteiros_xs = new google.maps.LatLng(40.562884,-7.113948);
var MY_MAPTYPE_ID = 'custom_style';

function calculateCenter() {
  center = map.getCenter();
}
function initialize() {

  var featureOpts = [
  {
    stylers: [
    { hue: '#b0d57d' },
    { visibility: 'on' },
    { gamma: 0 },
    { weight: 1 }
    ]
  },
  {
    elementType: 'labels',
    stylers: [
      { visibility: 'on' }
    ]
  },
  {
    featureType: 'water',
    stylers: [
      { color: '#f1f2f2' }
    ]
  }
  ];

var mapOptions;


    mapOptions = {
        scrollwheel: false,
        zoom: 10,
        center: monteiros_xs,
        disableDefaultUI: true,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
    };


  map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

  var styledMapOptions = {
  name: 'Granigri'
  };

    var rectangulo = new google.maps.Rectangle({
        strokeColor: '#3c3c3c',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#1a1a1a',
        fillOpacity: 0.35,
        map: map,
        bounds: new google.maps.LatLngBounds(new google.maps.LatLng(40.560884,-7.119948), new google.maps.LatLng(40.566884,-7.112948))
    });

    if(rectangulo !== "") {}

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

google.maps.event.addDomListener(map, 'idle', function() {
    calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});
}

$(document).ready(function(){
  initialize();
});

The error is always in the "google.maps" part. I've read somewhere that it can be related with trailing commas, but 24 hours later i can't find any.

So any ideas?

Answer 1

Try adding map center like this

var mapOptions;
mapOptions = {
    scrollwheel: false,
    zoom: 10,
    center: new google.maps.LatLng(40.562884,-7.113948),
    disableDefaultUI: true,
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
};