Not able to clear previous directions gmap3 jquery

Question

I am trying to generate the direction on a button click. User selects locations point a and point b and then press a button and code draw direction from that point a to point b. I have successfully completed this code but I am not able to remove the previous directions drawn on map. Please see the image link http://i.stack.imgur.com/z1fqo.png . I want to remove the a,b direction from the map as it was last direction.

$et_main_map.gmap3({
getroute:{
    options:{
            origin:org,
            destination:dest,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        },
        callback: function(results){
          console.log(results);
          if (!results) return;
            $(this).gmap3({
                directionsrenderer:{
                  divId:'directionPath', 
                  options:{
                    directions:results,
                    suppressMarkers: true 
                  }
                }
            });     
        }
      }
});

The above code adds the directions. The below code is not removing the directions on map.

$et_main_map.gmap3({
    clear: {
        name:["directionRenderer"]
    }
});

I have tried many things for eg followed below links. http://gmap3.net/forum/viewtopic.php?id=341 Gmap3 Clear Directions

Please help me. Thanks

Answer 1

I needed to update my gmap3 library. For those who want to fix this issue just update gmap3.js to version 5.1.1. This will fix the issue.

Answer 2

You should give directionsrenderer function an ID ("whatEverYourID") so that it will be recognized when clear function is called:

$et_main_map.gmap3({
    getroute:{
        options:{
           origin: org,
           destination: dest,
           travelMode: google.maps.DirectionsTravelMode.DRIVING
        },
        callback: function(results){
            console.log(results);
            if (!results) return;
            // this is addition lines for handling directions container------
            if (!$("#dircontainer").length>0) {
                $("<div id='dircontainer' class='googlemap'></div>").insertAfter("#map");
            } else {
                // this will clear previous the googlemap directions html container
                $("#dircontainer").html("");
            }
            // --------------------------------------------------------------
            $(this).gmap3({
                // clear previous direction
                clear: {
                    id: "whatEverYourID"
                },
                map:{
                    options:{
                         center:[tolat, tolong],
                         zoom: 10
                    }
                },
                directionsrenderer:{
                    container: $("#dircontainer"),
                    options:{
                        directions:results
                    },
                    // this is the ID you have to add
                    id: "whatEverYourID"
                 }
            });
        }
    }
});

I hope it will help