title: Google Maps Directions Appearing Twice?
body: <p>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!</p>
  
  <p>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:</p>
  
  <pre><code>var latitude = 0;
  var longitude = 0;
  $( document ).ready(function() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(initMap);
      } else {
          document.getElementById("feedback").innerHTML = "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);
          }
      });
  }
  </code></pre>
  
  <p>I'm guessing it has something to do with the lines:</p>
  
  <pre><code>directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('dirs'));
  </code></pre>
  
  <p>but I honestly can't see what. The example on the Google site (<a href="https://developers.google.com/maps/documentation/javascript/examples/directions-panel" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/directions-panel</a>) has two very similar lines, but doesn't give the same issue. I'm obviously needlessly calling something multiple times, but what?</p>
  
  <p>Thanks</p>