How to bind multiple polyline to the draggable marker

Question

I have multiple polyline and I want to bind those polyline with draggable marker. When I try to bind the marker with polyline the marker will disappear.

var locations = {
    "feed1": [
        [25.774252, -80.190262],
        [18.466465, -66.118292],
        [32.321384, -64.75737]
    ],
    "feed2": [

        [32.321384, -64.75737],
        [36.321384, -88.75737]
    ],
    "feed3": [

        [20.466465, -68.118292],
        [34.321384, -66.75737],
        [27.774252, -82.190262]
    ]
};

function MVCArrayBinder(mvcArray) {
    this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
    if (!isNaN(parseInt(key))) {
        return this.array_.getAt(parseInt(key));
    } else {
        this.array_.get(key);
    }
}
MVCArrayBinder.prototype.set = function(key, val) {
    if (!isNaN(parseInt(key))) {
        this.array_.setAt(parseInt(key), val);
    } else {
        this.array_.set(key, val);
    }
}

function marFunc(event) {
    console.log(event.latLng);
    var path = poly.getPath();

    path.push(event.latLng);
    var len = path.getLength();
    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable: true
    });
    marker.bindTo('position', poly.binder);
}

var poly;
var map;

function initialize() {
    var polyOptions = {
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        map: map
    };
    poly = new google.maps.Polyline(polyOptions);

    var bounds = new google.maps.LatLngBounds();
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(25.774252, -80.190262),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var markers = new Array();
    var polycoordinate = Array();

    poly.binder = new MVCArrayBinder(poly.getPath());
    for (var i in locations) {
        for (j in locations[i]) {
            var evt = {};
            evt.latLng = new google.maps.LatLng(locations[i][j][0], locations[i][j][1]);
            bounds.extend(evt.latLng);
            marFunc(evt);
        }
    }
    poly.setMap(map);
    map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

In the initialize() function I am looping through the object and rendering the polyline at the same time I am passing the lat lng to the marFunc() function to create marker.

This is what I am getting:

Answer 1

You have a typo in your code (you left out the last argument of the "bindTo" function):

marker.bindTo('position', poly.binder);

should be:

marker.bindTo('position', poly.binder, (len-1).toString());

Related question: Google Maps V3 Polyline : make it editable without center point(s)

proof of concept fiddle

code snippet:

var locations = {
  "feed1": [
    [25.774252, -80.190262],
    [18.466465, -66.118292],
    [32.321384, -64.75737]
  ],
  "feed2": [

    [32.321384, -64.75737],
    [36.321384, -88.75737]
  ],
  "feed3": [

    [20.466465, -68.118292],
    [34.321384, -66.75737],
    [27.774252, -82.190262]
  ]
};

function MVCArrayBinder(mvcArray) {
  this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
  if (!isNaN(parseInt(key))) {
    return this.array_.getAt(parseInt(key));
  } else {
    this.array_.get(key);
  }
}
MVCArrayBinder.prototype.set = function(key, val) {
  if (!isNaN(parseInt(key))) {
    this.array_.setAt(parseInt(key), val);
  } else {
    this.array_.set(key, val);
  }
}

function marFunc(event) {
  var path = poly.getPath();

  path.push(event.latLng);
  var len = path.getLength();
  var marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: true
  });
  marker.bindTo('position', poly.binder, (len - 1).toString());
}

var poly;
var map;

function initialize() {
  var polyOptions = {
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map
  };
  poly = new google.maps.Polyline(polyOptions);

  var bounds = new google.maps.LatLngBounds();
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(25.774252, -80.190262),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var markers = new Array();
  var polycoordinate = Array();

  poly.binder = new MVCArrayBinder(poly.getPath());
  for (var i in locations) {
    for (j in locations[i]) {
      var evt = {};
      evt.latLng = new google.maps.LatLng(locations[i][j][0], locations[i][j][1]);
      bounds.extend(evt.latLng);
      marFunc(evt);
    }
  }
  poly.setMap(map);
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>