I am facing an issue where I have multiple polylines and I want to bind them with draggable markers. However, when I attempt to bind the markers with the polylines, the markers 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);
Within the initialize() function, I iterate through the object to render the polylines and simultaneously pass the latitude and longitude to the marFunc() function to create markers.
This is the result I am currently experiencing: https://i.sstatic.net/DAADt.png