Why does only the last initially loaded latLng get updated when dragging the marker?

I'm trying to load a number of predefined markers on a map. I also want to allow clicking to create a new marker. I want the markers to be connected via polylines and I'm trying to get the polylines to redraw after a marker is dragged and dropped.

The following script seems to work for the last stop that is preloaded, as well as all new stops that are added, but not for the rest of the preloaded stops.

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
<script type="text/javascript">
var Demo = {
  map: null,
  markers: [],
  polyline: null,
  polygon: null,
  path: new google.maps.MVCArray
};

//var path = new google.maps.MVCArray;
var poly;

/**
 * Shows or hides all marker overlays on the map.
 */
Demo.toggleMarkers = function(opt_enable) {
  if (typeof opt_enable == 'undefined') {
    opt_enable = !Demo.markers[0].getMap();
  }
  for (var n = 0, marker; marker = Demo.markers[n]; n++) {
    marker.setMap(opt_enable ? Demo.map : null);
  }
};

/**
 * Shows or hides the polyline overlay on the map.
 */
Demo.togglePolyline = function(opt_enable) {
  if (typeof opt_enable == 'undefined') {
    opt_enable = !Demo.polyline.getMap();
  }
  Demo.polyline.setMap(opt_enable ? Demo.map : null);
};

/**
 * Shows or hides the polygon overlay on the map.
 */
Demo.togglePolygon = function(opt_enable) {
  if (typeof opt_enable == 'undefined') {
    opt_enable = !Demo.polygon.getMap();
  }
  //Demo.polygon.setMap(opt_enable ? Demo.map : null);
};

Demo.toggleAllOverlays = function() {
  var enable = true;
  if (Demo.markers[0].getMap() ||
      Demo.polyline.getMap()
      //Demo.polygon.getMap()
      ) {
    enable = false;
  }
  Demo.toggleMarkers(enable);
  Demo.togglePolyline(enable);
  Demo.togglePolygon(enable);
};

/**
 * Called only once on initial page load to initialize the map.
 */
Demo.init = function() {
  // Create single instance of a Google Map.
  Demo.map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 7,
    center: new google.maps.LatLng(20.352524120908313, -156.51013176888227),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });


  // Create a polyline connecting all markers.
  Demo.polyline = new google.maps.Polyline({
    strokeWeight: 3
  });

  Demo.polyline.setMap();
  Demo.polyline.setPath(new google.maps.MVCArray([Demo.path]));

  // Create multiple Marker objects at various positions.
  var markerPositions = [
    new google.maps.LatLng(21.297222168933754, -157.86145012825727),
    new google.maps.LatLng(19.650520003641244, -155.09289544075727),
    new google.maps.LatLng(19.072501451715087, -155.753173828125)
  ];
  for (var n = 0, latLng; latLng = markerPositions[n]; n++) {

        Demo.path.insertAt(Demo.path.length, latLng);

        var marker = new google.maps.Marker({
          position: latLng,
          draggable: true
        });

        Demo.markers.push(marker);

        google.maps.event.addListener(marker, 'dragend', function() {
            for (var i = 0, I = Demo.markers.length; i < I && Demo.markers[i] != marker; ++i);
            Demo.path.setAt(i, marker.getPosition());
        });

  }



  google.maps.event.addListener(Demo.map, 'click', addPoint);

  Demo.toggleAllOverlays();
};

 function addPoint(event) {
    Demo.path.insertAt(Demo.path.length, event.latLng);

    var marker = new google.maps.Marker({
      position: event.latLng,
      map: Demo.map,
      draggable: true
    });
    Demo.markers.push(marker);
    marker.setTitle("#" + Demo.path.length);

    google.maps.event.addListener(marker, 'dragend', function() {
      for (var i = 0, I = Demo.markers.length; i < I && Demo.markers[i] != marker; ++i);
      Demo.path.setAt(i, marker.getPosition());
    });
 }


// Call the init function when the page loads.
google.maps.event.addDomListener(window, 'load', Demo.init);
</script>
</head>
<body>
  <div>
    Toggle on/off:
    <input onclick="Demo.toggleMarkers();" type=button value="Markers"/>
    <input onclick="Demo.togglePolyline();" type=button value="Polyline"/>
    <input onclick="Demo.togglePolygon();" type=button value="Polygon"/>
    <input onclick="Demo.toggleAllOverlays();" type=button value="All Overlays"/>
  </div>
  <div id="map-canvas" style="width:600px; height:500px"></div>
</body>
</html>

ansaurus

tags:

views:

answers:

Why does only the last initially loaded latLng get updated when dragging the marker?

related questions