Google Maps API Marker Images not showing in Internet Explorer

Question

Hi, I'm using Google Maps API Javascript V3 and I have a problem where in Internet explorer, my marker images aren't appearing but according to Adobe Browserlab, other browsers have no problem. The coordinates are being read from a div called "hidden". Here is my code:

<script type="text/javascript"> 
function initialize() {
 var cent = new google.maps.LatLng([security block]);
 var myOptions = {
   zoom: 11,
   center: cent,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 var locations = document.getElementById("hidden").innerHTML;
 var spLocations = locations.split("<br>");
 var spLength = (spLocations.length)-1;
 var letter = "A";
 for(var i=0; i<spLength; i++){
 var formLocations = spLocations[i].split(",");
 var image = "http://www.google.com/intl/en_ALL/mapfiles/marker_black"+letter+".png";
 var myLatLng = new google.maps.LatLng(formLocations[0], formLocations[1]);
 var marker = new google.maps.Marker({
      position: myLatLng,
      icon: image,
      map: map
  });
 letter = String.fromCharCode(letter.charCodeAt() + 1);
 }
}
</script>    

Answer 1

I have sussed it out with the help of Google's Map API Forum.

As I was splitting the individual co-ordinates by Line Break <br> Internet Explorer capitalises the tag so I'd need to cater for upper case characters also, or the co-ordinates would not be separated.

A solution would be to change this line:

var locations = document.getElementById("hidden").innerHTML;

To this:

var locations = document.getElementById("hidden").innerHTML.toLowerCase();

Watch out for this in future guys