Users can edit lines on the map by dragging their vertices. When a vertex is moved, the system checks if it is near another object and attaches the line to that object if necessary.
During this process, when the user moves the line, the "set_at" event is triggered. In the function called by the listener, the line is programmatically edited to attach itself to the nearest object, if one exists. The original line remains visible but translucent on the map. However, this line eventually disappears after other operations are performed on the map.
Attempts have been made to clear the path (path.clear()), create a new path, remove it from the map (setMap(null)), and place it again (setMap(LocationPicker.map.map)). Unfortunately, none of these solutions have proven successful.
google.maps.event.addListener(marker.getPath(), 'set_at', function(vertex, eventC) {
LocationPicker.controlVertexMovement(marker,vertex, eventC);
});
controlVertexMovement: function(marker, vertex, eventC) {
var path = marker.getPath();
var closest = LocationPicker.searchClosestObject(path.j[vertex].lat(), path.j[vertex].lng());
if(closest!=null){
path.j[vertex] = closest.latlng;
LocationPicker.map.overlays[overlayNum].setPath(path);
}
}
The current result can be seen here: The expected result should look like this:
For a working example, check out this example fiddle.
Code Snippet:
... (Omitted for brevity) ... /* Styles omitted for brevity */<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>