Facing issue with Google Maps API - Directions Service Clear Route

Question

On Map if there already is setDirection of user(A) path and then if I set new user(B) direction path then I want to clear old user(A) route path.

I am facing an issue, when I click on user(B) then direction path set of user(B) but user(A) path did not clear.

I have also set blank object, array in directionsDisplay.setDirections({ routes: [] }); but it did't work for me.

Can you please see if I missed anything - do guide me

Below is my code:

var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var route = [];
    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(23.023292, 72.571144);
        var mapOptions = {
            zoom: 11,
            center: chicago
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        //console.log(map);
        directionsDisplay.setMap(map);

    }

    $(document).ready(function(){
        google.maps.event.addDomListener(window, 'load', initialize);
    });

    function calcRoute(data) {           

        if(data.length)
        {
            for (var key in data) {
                var track = data[key];
                var start = new google.maps.LatLng(track[0].latitude,track[0].longitude);
                var end = new google.maps.LatLng(track[track.length - 1].latitude,track[track.length - 1].longitude);

                var waypoints = track;
                waypoints.shift();
                waypoints.pop();

                var waypointsgoogle = [];

                for(var waykey in waypoints)
                {
                    waypointsgoogle.push({
                        location: new google.maps.LatLng(waypoints[waykey].latitude,waypoints[waykey].longitude),
                        stopover: false
                    });
                }

                directionsService.route({
                    origin: start,
                    destination: end,
                    optimizeWaypoints:true,
                    travelMode: google.maps.TravelMode.DRIVING,
                    waypoints:waypointsgoogle
                }, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {

                    var directionsDisplay = new google.maps.DirectionsRenderer({
                            preserveViewport: true
                        });

                        directionsDisplay.setOptions({
                            polylineOptions: {
                                strokeColor: '#0089d0'                                    
                            }
                        });

                        directionsDisplay.setMap(map);
                        directionsDisplay.setDirections(response);
                } else {
                    alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
                }
                }); 
            }
        }
        else`enter code here`
        {
            directionsDisplay = new google.maps.DirectionsRenderer();
        }
    }

possible duplicate of [Google MAP API V3 cannot clear the previous mutiple routes history](https://stackoverflow.com/questions/32676497/google-map-api-v3-cannot-clear-the-previous-mutiple-routes-history) — geocodezip, Jan 05 '18 at 15:12
possible duplicate of [Google map Remove previous route and draw a new route](https://stackoverflow.com/questions/32949713/google-map-remove-previous-route-and-draw-a-new-route) — geocodezip, Jan 05 '18 at 15:13

Emmanuel Delay · Answer 1 · 2018-01-05T11:10:09.893

Line 44: take away "var", where you say var directionsDisplay = ...

EDIT: You probably best delete that whole line 44. directionsDisplay is already a DirectionsRenderer

What var does inside a function, is make a new object every time the function is called. So the old object just stays on the map (except you can't access it easily, because var directionsDisplay no longer points to the old object).

// global variables, outside of every function
var directionsDisplay;
var directionsService;

// Below this point DO NOT use "var directionsDisplay" or "var directionsService" anymore.
// omit the var

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  ...
}
...

I know this is the problem, I'm not sure it solves everything. Let me know if it doesn't.

Facing issue with Google Maps API - Directions Service Clear Route

1 Answers1