Google Maps Complex Icons - Page error

Question

I have the following google maps code:

<script type="text/javascript"> 
function initialize() { 
var mapOptions = { 
center: new google.maps.LatLng(-27.444916,153.03), 
zoom: 12, 
disableDefaultUI: true,
keyboardShortcuts: false,
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), 
mapOptions); 
setMarkers(map, beaches); 
} 
var beaches = [
['Car:806', -27.4481025666613, 153.035155217002, 916],
['Car:520', -27.4777186625335, 153.00697421394, 915],
['Car:1477', -27.4523199466005, 153.029570366226, 914],
['Car:815', -27.5315143182514, 153.023819055977, 913],
['Car:334', -27.3930054770139, 153.104887341157, 912],
['Car:191', -27.4705744176833, 153.030243260862, 911],
...

['Car:618', -27.4146792620242, 153.081801794924, 1],
['Car:1096', -27.3369540394594, 153.069279763313, 0],
];
function setMarkers(map, locations) { 
var image = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_orange.png', 
new google.maps.Size(20, 32), 
new google.maps.Point(0,0), 
new google.maps.Point(0, 32)); 
var shadow = new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_shadow.png', 
new google.maps.Size(37, 32), 
new google.maps.Point(0,0), 
new google.maps.Point(0, 32)); 
var shape = { 
coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
type: 'poly' 
}; 
for (var i = 0; i < locations.length; i++) { 
var beach = locations[i]; 
var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
var marker = new google.maps.Marker({ 
position: myLatLng, 
map: map, 
shadow: shadow, 
icon: image, 
shape: shape, 
title: beach[0], 
zIndex: beach[3] 
}); 
} 
} 
</script> 

It works fine in chrome and IE, but in IE i get an error. it all looks fine to me, but id really like to work out why i get this error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.4; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; .NET CLR 1.1.4322)
Timestamp: Wed, 30 Jan 2013 22:40:09 UTC


Message: '1' is null or not an object
Line: 966
Char: 1
Code: 0
URI: file://ycab01/Homedirs$/it3/Desktop/Michael/WEB%20DEV/CarPositionBrisbane.HTML

The reference to line 996 is:

var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 

i presume that IE doesnt like the call to the index in the array. I just wonder if there is a different way to do this?

Mike

Answer 1

IE doesn't like "hanging commas" (commas at the end of arrays or objects, without anything after them). They cause it to append a null to the end of the object or array, which then generates an error in the API.

Remove them from your code.

var beaches = [
['Car:806', -27.4481025666613, 153.035155217002, 916],
['Car:520', -27.4777186625335, 153.00697421394, 915],
['Car:1477', -27.4523199466005, 153.029570366226, 914],
['Car:815', -27.5315143182514, 153.023819055977, 913],
['Car:334', -27.3930054770139, 153.104887341157, 912],
['Car:191', -27.4705744176833, 153.030243260862, 911],
...

['Car:618', -27.4146792620242, 153.081801794924, 1],
['Car:1096', -27.3369540394594, 153.069279763313, 0], // ** remove the comma at the end of this line **
];