Failed in clear the route of the Direction Service in Google Map API 3

Question

When i click a button to reset the map by clearing the marker and the direction route, i am not sure the user have already created the route or not. My function will be dead if the following codes are included during the Click Event. But it worked properly if these three codes are removed...

directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay.setDirections({routes: []});

Is it necessary to determine whether the directionsDisplay are null or not before executing the aforesaid codes? My codings are extracted below for your advice... Many thanks...

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var StartMarker = null;
var EndMarker = null;
var directionsVisible = false;
var oldDirections = [];
var currentDirections = null;

google.maps.event.addListener(map, 'click', function(event) {
    if (!StartMarker) {
        origin = event.latLng;

        lat = origin.lat();
        lng = origin.lng();
        /*If the origin is null, run UpdateLatLng() function to convert 
          the Lat, Lng of the mouse click position to Northing, Easting and
          assign the value to the textbox */
        UpdateLatLng();

        var startimage = 'images/Start4.png';
        StartMarker = new google.maps.Marker({
            map: map,
            position: origin,
            icon: startimage
        });
    } else {
        //Relocate the Starting point and assign the new position to Textbox
        alert ("The starting point was relocated on screen"); 
        StartMarker.setMap(null);
        if (EndMarker !==null) {
            EndMarker.setMap(null);
        };
        directionsDisplay.setMap(null);
        directionsDisplay.setPanel(null);
        directionsDisplay.setDirections({routes: []});
        var origin = event.latLng;
        lat = origin.lat();
        lng = origin.lng();
        UpdateLatLng();
        //StartMarker.setPosition(origin.getposition());
        var startimage = 'images/Start4.png';
        StartMarker = new google.maps.Marker({
            map: map,
            position: origin,
            icon: startimage
        });
    }
});

google.maps.event.addListener(directionsDisplay, 'directions_changed',
        function() {
            if (currentDirections) {
                oldDirections.push(currentDirections);
                setUndoDisabled(false);
            }
            currentDirections = directionsDisplay.getDirections();
            calcRoute();
        });
function calcRoute() {
    if (origin == null) {
        alert("Please input the starting point");
        return;
    }

    var mode;
    switch (document.getElementById("mode").value) {
        case "driving":
            mode = google.maps.DirectionsTravelMode.DRIVING;
            break;
        case "walking":
            mode = google.maps.DirectionsTravelMode.WALKING;
            break;
        case "transit":
            mode = google.maps.DirectionsTravelMode.TRANSIT;
            break;
    }

    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,
        optimizeWaypoints: document.getElementById('optimize').checked,
        avoidHighways: document.getElementById('highways').checked,
        avoidTolls: document.getElementById('tolls').checked
    };

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

        }
    });

    directionsVisible = true;
}

Answer 1

The problem is fixed by adopting the following codes...

 if(directionsDisplay != null) { 
   directionsDisplay.setMap(null);
   directionsDisplay = null; }

Answer 2

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