Google Maps Directions dragged polyline coordinates reset after extending the route

Question

Hey guys, the function of this code is described below.

there are some predefined functions below i.e getMapOption and others

---

function initialize(){
    var divCalcDis = $('divCalcDis');
    var pdist = $('pdist');
    var pTimeTaken = $('pTimeTaken');
    var txtLatLon = $('divLatLon');
    var lblDistance = $('lblDistance');
    var mapOption = mapHandler.getMapOption(that.LonLatCoordinates[0], 15, "Default");
    map = mapHandler.getMap('map_canvas', mapOption);
    var renderOption = { draggable: true };
    directionsDisplay = new google.maps.DirectionsRenderer(renderOption);
    directionsDisplay.setMap(map);
    google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {        for (i = 0; i < directionsDisplay.directions.routes.length; i++) {
        //getting latlon
    txtLatLon.innerHTML = "";
                console.log(directionsDisplay.directions.routes[i].overview_path.length);
                var latLng = directionsDisplay.directions.routes[i].overview_path[k];
            var latLng = directionsDisplay.directions.routes[i].overview_path[directionsDisplay.directions.routes[i].overview_path.length - 1].toString();
            latLng = latLng.split('(')[1];
            latLng = latLng.split(')')[0];
            latLng = latLng.split(' ');
            latLng = latLng[0] + latLng[1];
            txtLatLon.innerHTML += latLng;
        }
    });
    startMap();
}

function startMap() {
    var i=0;
    google.maps.event.addListener(map, 'click', function (event) {
        i++;
        if(i === 1){
            mapHandler.setMarker(event.latLng, map, "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png", null, null, null, that.permanentMarkers, false);
            that.origin = event.latLng;      //comma seperated values of lat,lon
        }
        else if(i > 1){
            mapHandler.setMarker(event.latLng, map, "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png", null, null, null, that.permanentMarkers, false);
            if (i === 2) {
                that.dest = event.latLng;      //comma seperated values of lat,lon
            }
            else if (i > 2) {
                that.wayPTs.push({
                    location: that.dest,
                    stopover: true
                });
                that.dest = event.latLng;
            }
            that.calcRoute();
        }});
};

function calcRoute() {
    var divCalcDis = stringHandler._id('divCalcDis');
    var pdist = stringHandler._id('pdist');
    var pTimeTaken = stringHandler._id('pTimeTaken');
    var txtLatLon = stringHandler._id('divLatLon');
    txtLatLon.innerHTML = "";
    if (!that.wayPTs.length > 1) {
        this.wayPTs = null;
    }
    var request = this.directionsRequest(this.origin,this.dest,google.maps.DirectionsTravelMode.DRIVING,this.wayPTs,false,true,true,google.maps.DirectionsUnitSystem.METRIC);

    that.directionsResponse.route(request, function (response, status) {
        //console.log(response);
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
      });
 };

---

** I am making a project using Google Maps API V3 Directions library in which i am creating a route when a user click some place on the map
Here is a screenshot
**

---

Now when i drag the direction drawn line it works smoothly and giving me the latitude and longitude correctly.
Here is a screenshot

---

But the Problem is when i click on anyother place on the map(after dragging) the waypoint refreshes and i get the old without drag route with the next stop as you can see below
Here is a Screenshot

---

How to save the latLon of the waypoint so they are available after creation of new points
Thx

Answer 1

You need to push the coordinates into the route array so they will always be available. So push when you drag and push when you click. May be this can be of assistance to you. Best of luck.