how to lock a draggable route with google Maps?

Question

I've got google map on my webapp working with the JavaScript API V3. I give my users the ability to create some routes with this features:

1. the user can create a route.
2. the user can add waypoints doing click on the map.
3. the use can modify any waypoint and the markers origin/destination dragging the marker on the map.
4. the user can save the route.

The problem:

If the user click and dragging some part of the route without use any waypoint, the route change but I can't save it. Because I save the markers origin/destination and the waypoints.

there is any way to lock the route?

1. Here you can see an example in API documentation

Below I leave an image that you can see how the user drag the black and white circle and change the route (this is that I try to lock).

Answer 1

You need to tap into direction_changed event listener and puckup route points and see which ones you need and which ones you dont.

The other solution is to use non draggable route code and only allow user to click and create a point. Then calculate dustance when you have more than 1 points. Allow user to drag marker only and update route and total distance on drop marker.

If you can create a jsfiddle of what you have done so far it would help us look into it and give you a more accurate answer with working example.

Answer 2

Encountered the same problem today and found out that there's a setting for it. You just need to set the clickable property of polylineOptions to false.

this.directionsRenderer=new google.maps.DirectionsRenderer({draggable:!0,map,panel:this.elements.directionsBody,polylineOptions:{clickable:!1,strokeColor:"#4BAFF8"}})

DirectionsRenderer: https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRendererOptions.polylineOptions

PolylineOptions: https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions