clear directions on google map

Question

I am trying to show/hide multiple directions using checkbox but unable to hide or clear directions when they are set. I tried several thing that I found on net but without any success.

Inside checbox==false I tried

1. directionsRenderer.setMap(null);

2. directionsRenderer.setMap(null); directionsRenderer=null; directionsRenderer.setMap(map);

3. repeat whole function with directionsRenderer.setMap(null);

4. directionsDisplay.setMap(map);

and many other variation. ...any help?

code:

var directionsService = new google.maps.DirectionsService;
function getvoznje() {    
    if  (document.getElementById('voznje').checked==true) 
    { 
        function renderDirections(result) {
            var directionsRenderer = new google.maps.DirectionsRenderer;
            directionsRenderer.setOptions({
                preserveViewport: true,
                draggable: true,
                polylineOptions: {
                    strokeColor: "#00" + (Math.round(Math.random() * 0XFFFF)).toString(16)
                }
            });
            directionsRenderer.setMap(map);
            directionsRenderer.setDirections(result);
        }

        function requestDirections(start1, end1, start2, end2) {
            directionsService.route({
                origin: new google.maps.LatLng(start1,end1),
                destination: new google.maps.LatLng(start2,end2),
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function(result) {
                renderDirections(result);
            });
        }

        for (var i = 0;  i <put.length-3; i+=4){
            requestDirections(put[i], put[i+1], put[i+2], put[i+3]);
        } 

     } 

     if  (document.getElementById('voznje').checked==false)  
     {
         directionsRenderer.setMap(null);
     }
 }  

Answer 1

The code that work is below.

    var directionsService = new google.maps.DirectionsService;          
     var directionsRenderer=[];
     var cur=0; 

    function renderDirections(result) {
       directionsRenderer[cur] = new google.maps.DirectionsRenderer;
      directionsRenderer[cur].setOptions({ 
        preserveViewport: true, 
        draggable: true, 
        polylineOptions: {
            strokeColor: "#00" + (Math.round(Math.random() * 0XFFFF)).toString(16) , strokeOpacity:0.6
            } });
      directionsRenderer[cur].setMap(map);
      directionsRenderer[cur].setDirections(result);
      cur=cur+1;
    }

    function requestDirections(start1, end1, start2, end2) {
      directionsService.route({
        origin: new google.maps.LatLng(start1,end1),
        destination: new google.maps.LatLng(start2,end2),
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result) {
        renderDirections(result);
      });
    }

    function getvoznjice() {
    for (var i = 0;  i <put.length-3; i+=4){
        requestDirections(put[i],put[i+1],put[i+2],put[i+3]);
       }
    }

function getvoznje() {    
    if  (document.getElementById('voznje').checked==true)  {
        cur=0;
        getvoznjice();
       } 
    if  (document.getElementById('voznje').checked==false) {
        for (var i = 0;  i <cur; i++){
        directionsRenderer[i].setMap(null); 
        }
       } 


}   

Answer 2

I'd reorganise the code so the functions aren't created inside if statements. I expect this is a variable scope problem.

You're correct to pass null to the setMap function to remove the directions from the map, according to the documentation:

This method specifies the map on which directions will be rendered. Pass null to remove the directions from the map.

var directionsService = new google.maps.DirectionsService,
    directionsRenderer = new google.maps.DirectionsRenderer;
function renderDirections(result) {
    directionsRenderer.setOptions({
        preserveViewport: true,
        draggable: true,
        polylineOptions: {
            strokeColor: "#00" + (Math.round(Math.random() * 0XFFFF)).toString(16)
        }
    });
    directionsRenderer.setMap(map);
    directionsRenderer.setDirections(result);
}
function requestDirections(start1, end1, start2, end2) {
    directionsService.route({
        origin: new google.maps.LatLng(start1,end1),
        destination: new google.maps.LatLng(start2,end2),
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(result) {
        renderDirections(result);
    });
}
function getvoznje() {    
    if  (document.getElementById('voznje').checked==true) 
    { 
        for (var i = 0;  i <put.length-3; i+=4){
            requestDirections(put[i], put[i+1], put[i+2], put[i+3]);
        } 
    } 

    if  (document.getElementById('voznje').checked==false)  
    {
        directionsRenderer.setMap(null);
    }
}