Question

I’m a little confused with some errors that being thrown up by Internet Explorer 8, but not by Firefox.

I am seeing the following errors:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windwos NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Wed, 13 Jun 2012 08:33:22 UTC

Message: Object expected
Line: 3
Char: 1
Code: 0
URI: http://<ipAddress>/.../locations.js

Message: Syntax error
Line: 34
Char: 11
Code: 0
URI: http://<ipAddress>/.../testMap1.html

I am using the following files…

testMap1.html:

    <div id="map_canvas" style="width: 1200px; height: 700px;">map div foo</div>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="/static/app/foo/locations.js"></script>
    <!--<script type="text/javascript" src="/static/app/foo/script.js"></script>-->
    <script type="text/javascript">

  var centerPoint = new google.maps.LatLng(9.449062,7.950439);

  var parliament = new google.maps.LatLng(9.449062,7.950439);
  var parliament1 = new google.maps.LatLng(34.449062,7.950439);
  var marker;
  var map;
  var i;

  function initialize() {
      var mapOptions = {
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        center: centerPoint
      };

      map = new google.maps.Map(document.getElementById("map_canvas"),
              mapOptions);


      for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            map:map,
            draggable: false,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(locations[i][0], locations[i][1]),
          });
          google.maps.event.addListener(marker, 'click', toggleBounce);
      }
  }

// for toggleBounce, need to add ", toggleBounce" back into previous brackets.

  function toggleBounce() {

      if (marker.getAnimation() != null) {
        marker.setAnimation(null);
      } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
      }

  }
    </script>

locations.js:

  var locations = [
     [9.449062, 7.950439, 0],
     [34.449062, 10.950439, 50]
  ];

Any thoughts as to why this wouldn’t work? any blinding errors?

Regards,

Matt

Answer 1

Remove trailing comma from this line:

position: new google.maps.LatLng(locations[i][0], locations[i][1]),

It causes problems in IEs.

marker = new google.maps.Marker({
   map:map,
   draggable: false,
   animation: google.maps.Animation.DROP,
   position: new google.maps.LatLng(locations[i][0], locations[i][1]) //removed comma
});