Google Maps Directions Appearing Twice?

I'm trying to create a page which, on load, will show the user's current position on a google map. There will also be a select list of various possible destinations. When the select list changes the map will show the route from current position to the destination. So far so good!

Where it goes wrong is when I try to add in the driving directions. For some reason they appear twice, but I can't see why. This is the code:

var latitude = 0;
var longitude = 0;
$( document ).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(initMap);
    } else {
        document.getElementById("feedback").ierHTML = "Geolocation is not supported by this browser.";
    }
});
function initMap(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    latlong = latitude + "," + longitude;
    var myCentre = new google.maps.LatLng(latitude,longitude);
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: {lat: latitude, lng: longitude},
        mapTypeId:google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: myCentre,
        title: 'Your current position'
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('dirs'));        
    marker.setMap(map);

    var control = document.getElementById('floating-panel');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);



    var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay, myCentre, marker);
    };
    document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay, myStart, marker) {
    marker.setMap(null);
    directionsService.route({
        origin: myStart,
        destination: document.getElementById('end').value,
        travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

I'm guessing it has something to do with the lines:

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dirs'));

but I honestly can't see what. The example on the Google site (https://developers.google.com/maps/documentation/javascript/examples/directions-panel) has two very similar lines, but doesn't give the same issue. I'm obviously needlessly calling something multiple times, but what?

Thanks