CODEWITHSUNDEEP
javascriptangularjsgoogle-maps-api-3
Hugo Leite
Hugo Leite

Reputation: 3

How can I clear routes on google.map?

When I load more than one route, the previous route is not removed. Many people said to set directionsDisplay.setMap to null, but that doesn't work. It looks like the route is on the map and not on directionsDisplay. This is my code that doesn't work:

NgMap.getMap('mapShop').then(function(map) {
    $scope.googleMaps = map;
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
                    directionsDisplay.setMap(null);
                    directionsDisplay.setDirections(null);
                    directionsDisplay.setMap($scope.googleMaps);

    // get geolocation for center map and marker
    NavigatorGeolocation.getCurrentPosition().then(function(position) {
        $scope.latitude = $routeParams.latitude;
        $scope.longitude = $routeParams.longitude;
        $scope.urlLocalCard = "http://maps.apple.com/?daddr=" + $routeParams.latitude + "," + $routeParams.longitude + "&saddr=" + position.coords.latitude + "," + position.coords.longitude + "&ll=" + $routeParams.latitude + "," + $routeParams.longitude + "&z=10&t=s";
        var request = {
            origin: position.coords.latitude + ',' + position.coords.longitude,
            destination: $routeParams.latitude + ',' + $routeParams.longitude,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                alert('Google route unsuccesfull!');
            }
        });
    });

Upvotes: 0

Views: 1652

Answers (1)

Adam Azad
Adam Azad

Reputation: 11297

Because you lose reference to the old directionsDisplay by assigning the latter variable to the new instance of google.maps.DirectionsRenderer. Move the directionsDisplay and directionsService to global scope. 

var directionsDisplay,
    directionsService;

// Update global reference upon Google map loads
function initMap(){

    directionsDisplay = new google.maps.DirectionsRenderer(); 
    directionsService = new google.maps.DirectionsService();

}

NgMap.getMap('mapShop').then(function(map) {

       $scope.googleMaps = map;

       directionsDisplay.setMap(null);
       directionsDisplay.setDirections(null);

       // rest of code       

});

Upvotes: 3

Related Questions