This library adds an edit method to the google.maps.Polyline class. When the polyline is in edit mode it shows up draggable markers for every point. Right clicking an existing marker will remove it. By default you will see transparent "ghost" markers. Click and drag them to add new points to the polyline.
var polyline = new google.maps.Polyline({
map: map,
path: [
new google.maps.LatLng(40.77153,-73.97722),
new google.maps.LatLng(40.77803,-73.96657)
]
});
polyline.edit(); // start editTo stop editing simply pass false to the method.
polyline.edit(false);You can disable ghost markers by passing an options object and set the ghost property to false.
var options = {
ghosts: false
}
polyline.edit(true, options);While in edit mode events are fired while interacting with the polyline.
edit_start- Editing was enabled.edit_end- Editing was disabled. Passes the newpath.update_at- A point was edited. Passesindexandpositioninsert_at- A point was added. Passesindexandpositionremove_at- A point was deleted. Passesindexandposition
Example:
// when editing started
google.maps.event.addListener(polyline, 'edit_start', function(){
log("[edit_start]");
});
// when editing in finished
google.maps.event.addListener(polyline, 'edit_end', function(path){
var coords = [];
path.forEach(function(position){
coords.push(position.toUrlValue(5));
});
log("[edit_end] path: " + coords.join(" | "));
});
// when a single point has been moved
google.maps.event.addListener(polyline, 'update_at', function(index, position){
log("[update_at] index: " + index + " position: " + position);
});
// when a new point has been added
google.maps.event.addListener(polyline, 'insert_at', function(index, position){
log("[insert_at] index: " + index + " position: " + position);
});
// when a point was deleted
google.maps.event.addListener(polyline, 'remove_at', function(index, position){
log("[remove_at] index: " + index + " position: " + position);
});Note: This class uses several marker images in edit mode.
- ghostVertex.png
- ghostVertexOver.png
- vertex.png
- vertexOver.png
By default it looks for those images in "../src/images/".
You can override this settings globally:
google.maps.Polyline.prototype.edit.settings.imagePath = "/myImages/polyline/" or you can pass the imagePath option to the edit call:
polyline.edit(true, {
imagePath: "/myImages/polyline/"
}); Origial work is done by Dmitry Ryshkin. Special thanks Jan Pieter Waagmeester for the idea of using the library google.maps.geometry, which performs spherical linear interpolation between the two locations.
Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent