directionsDisplay.setMap(null) isn't removing existing driving directions.

[captainmorgan0]

I've created a google map that plots the route to drive. When I try to plot a different route, the first route remains on the map. I've tried directionsDisplay.setMap(null); to remove the old route, but this isn't working.

uiGmapIsReady.promise().then(function (map_instances) {
                $scope.mapRef = $scope.map.control.getGMap();
            });

$scope.getDirections = function (lat, long, origin, type) {
            uiGmapGoogleMapApi.then(function (maps) {
                var directionsService = new maps.DirectionsService();
                var directionsDisplay = new maps.DirectionsRenderer();

                if (origin == "" || type == "geo") {
                    origin = $scope.geoPosition.coords.latitude + ", " + $scope.geoPosition.coords.longitude;
                }

                var request = {
                    origin: origin,
                    destination: lat + ", " + long,
                    travelMode: maps.TravelMode['DRIVING'],
                    optimizeWaypoints: true
                };

                directionsService.route(request, function (response, status) {
                    if (status === google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setMap(null);
                        directionsDisplay.setMap($scope.mapRef);
                        directionsDisplay.setDirections(response);

                    } else {
                        console.log('Directions request failed due to ' + status);
                    }
                });


            });
        }

[nmccready]

Please make a plnkr

[captainmorgan0]

Created Plunker here http://plnkr.co/edit/ApJ7ob7fxKqE2KiHqiZM?p=preview
However it's not working. I'm getting "Directions request failed due to ZERO_RESULTS". Is this due to configuring with a google maps key.

[eljazouli]

You can remove existing driving directions by calling directionsDisplay.set('directions', null);

[nmccready]

Thanks @eljazouli

[mkhelifi]

@captainmorgan0 or @eljazouli can you please share working code for this issue?

Thanks a lot

[captainmorgan0]

Try this:

    uiGmapIsReady.promise().then(function (map_instances) {
            $scope.mapRef = $scope.map.control.getGMap();

            uiGmapGoogleMapApi.then(function (maps) {
                $scope.directionsDisplay = new maps.DirectionsRenderer();
            });
        });

$scope.getDirections = function (lat, long, origin, type) {
        uiGmapGoogleMapApi.then(function (maps) {
            var directionsService = new maps.DirectionsService();

            if (origin == "" || type == "geo") {
                origin = $scope.geoPosition.coords.latitude + ", " +$scope.geoPosition.coords.longitude;
            }

            var request = {
                origin: origin,
                destination: lat + ", " + long,
                travelMode: maps.TravelMode['DRIVING'],
                optimizeWaypoints: true
            };

            directionsService.route(request, function (response, status) {

                if (status === google.maps.DirectionsStatus.OK) {

                    $scope.directionsDisplay.setMap(null);
                    $scope.directionsDisplay.setMap($scope.mapRef);

                    $scope.directionsDisplay.setPanel(document.getElementById("directionsPanel"));
                    $scope.directionsDisplay.setDirections(response);
                    $scope.showDrivingDirections = true;

                } else {
                    $scope.showDrivingDirections = false;

                }
            });
        });
    }

[mkhelifi]

it works just fine for me
Thank you @captainmorgan0