CODEWITHSUNDEEP
javascriptjquerygoogle-maps
user1442404
user1442404

Reputation: 99

Google maps API, cannot clear previous route

Below is the function i'm using to generate a route from a given point. I have several places where a user can request directions from... if the user requests directions for a 2nd time then the 1st route is still displayed on the map, obviously this does not look good. How can I remove it? 

base.getRoute = function(start, la, lo) {

        var directionsService = new google.maps.DirectionsService();

        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(base.map);
        directionsDisplay.setPanel(document.getElementById("drivingDirectionsPanel"));

        start+=",uk";
        var end = new google.maps.LatLng(la, lo);
        var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response,status) {
            if(status == google.maps.DirectionsStatus.OK) {


                $('#drivingDirectionsPanel').html('');
                directionsDisplay.setDirections(response);

                $('html, body').animate({ 
                      scrollTop: $('#drivingDirectionsPanel').offset().top 
                  }, 1500);

            } else {
                alert("There was a problem finding directions");
            }
        });         
    };

I have tried adding a 

directionsDisplay.setMap(null);

but this does not work.

Any ideas guys? Thanks

Upvotes: 1

Views: 4472

Answers (4)

Vijay Bansal
Vijay Bansal

Reputation: 783

I got this to work using the combination of the solutions suggested above. So the "directionsDisplay" needs to be global and then directionsDisplay.setMap(null) needs to be called before you create directionsDisplay another time and it will clear the previous route from the map.

Here is the code:

    if(directionsDisplay != undefined) 
        directionsDisplay.setMap(null);

    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport:true});
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('dvDirResults'));

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            $('#<%= lblGetDirError.ClientID %>').hide();
            $('#dvDirResults').html("");
            directionsDisplay.setDirections(response);
            map.panToBounds(response.routes[0].bounds);
            map.setCenter(response.routes[0].bounds.getCenter()); 
            //map.fitBounds(response.routes[0].bounds);
            if(map.getZoom() < 10) map.setZoom(10);
        }
        else
            $('#<%= lblGetDirError.ClientID  %>').show();
    });

Upvotes: 0

Dishan TD
Dishan TD

Reputation: 8728

directionsDisplay.setMap(null);
map.setZoom(8);
map.setCenter();

Upvotes: 0

Kevin B
Kevin B

Reputation: 95020

Here's how i did it:

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.extend(map,{
    pv: {
        markerArray: [],
        areaCircle: null,
        userLocation: {
            latitude: 38.68551,
            longitude: -98.789062
        },
        removeAllMarkers: function(){
            for (var i = 0; i < this.markerArray.length; i++) {
                if (this.markerArray[i].directions) this.markerArray[i].directions.setMap(null);
                this.markerArray[i].setMap(null);
            }
        },
        removeAllDirections: function(){
            for (var i = 0; i < this.markerArray.length; i++) {
                if (this.markerArray[i].directions) this.markerArray[i].directions.setMap(null);
            }
        },
        geocoder: new google.maps.Geocoder(),
        directions: new google.maps.DirectionsService(),
        directionPanel: document.getElementById('directions'),
        center: null
    }
});

Now any time i add a marker, i add a reference to it inside of markerArray, then when i want to remove all directions or all markers, i simply call map.pv.removeAllDirections() or map.pv.removeAllMarkers()

Upvotes: 0

Rick
Rick

Reputation: 1573

Make directions display a 'class' or a global variable so it will clear the panel when it renders the directions reaponse.

Upvotes: 1

Related Questions