Utilizing AngularJS and the ui-gmap-google-map directive (http://angular-ui.github.io/angular-google-maps/#!/), I've successfully implemented a google map that displays driving routes. However, I'm encountering an issue where the previous route persists on the map when attempting to plot a new one. I tried using directionsDisplay.setMap(null); to remove the old route but it's not having the desired effect. Can someone offer guidance or assistance?
Below is the relevant section of code from my controller:
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);
}
});
});
}