How to add point on polyline somewhere between two vertexes? - google-maps-api-3

Question

The goal is to have an editable polyline with customized markers at every vertex.
As I see Map API V3 does not allows that. So I made editable polyline like this:
let polyline = new self.google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 0.3,
strokeWeight: 3,
editable: false,
path: path,
map: self.map
});
polyline.binder = new MVCArrayBinder(polyline.getPath());
let markers = [];
for (let i = 0; i < path.length; i++) {
let marker = this.getBasicMarker(path[i]);
marker.bindTo('position', polyline.binder, i.toString());
markers.push(marker);
}
getBasicMarker(position){
return new this.google.maps.Marker({
position: position,
map: this.map,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
draggable: true,
visible: false
});
}
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);
}
};
Final polyline now looks like this: http://sandbox.rubera.ru/img/2019-05-28_17-04-25.jpg. I can drag any existing point. The polyline updating while dragging the point.
Now I have to add new vertex somewhere between two existing.
This is where I'm stuck.
May be there is another solution how to solve the task?

Answer 1

In case anybody face similar task here is a few modifications to my code posted abowe. That helped me finally solve the problem.
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);
}
};
MVCArrayBinder.prototype.insertAt = function (key, val) {
this.array_.insertAt(key, val);
};
google.maps.event.addListener(this.activePoly, 'click', function (e) {
let path = $this.activePoly.getPath(),
inserted = false;
// find line segment
for (let i = 0; i < path.getLength() - 1, !inserted; i++) {
let tempPoly = new google.maps.Polyline({
path: [path.getAt(i), path.getAt(i + 1)]
});
if (google.maps.geometry.poly.isLocationOnEdge(e.latLng, tempPoly, 10e-2)) {
$this.activeRoute.binder.insertAt(i + 1, e.latLng);
inserted = true;
let marker = $this.getBasicMarker(e.latLng);
marker.setVisible(true);
// Add new marker to array
$this.activeRoute.markers.splice(i + 1, 0, marker);
// Have to rebind all markers
$this.activeRoute.markers.forEach((marker, index) => {
marker.bindTo('position', $this.activeRoute.binder, index.toString());
});
}
}
});
My activeRoute is an object with following structure:
{polyline: polyline, markers: markers, binder: polyline.binder}