title: How to display updated coordinates when dragging marker (draggable directions) on the map in google maps javascript?
body: <p>I am developing a web application where the user drag the markers of destination on the screen and the input fields for duration and destination update automatically. I have also put in fields for origin and destination coordinates and I want to update them as well when the on screen markers are dragged. I just don't know where to grab those values from. Here is my code:</p>
  
  <pre><code>&lt;div id="map" style="width: 400px; height: 300px;"&gt;&lt;/div&gt; 
    Duration: &lt;input id="duration"&gt;&lt;/div&gt; 
    Distance:  &lt;input id="distance"&gt;&lt;/input&gt;
    Origin Longitude &lt;input id="origin_longitude"&gt;&lt;/input&gt;
    Origin Latitude &lt;input id="origin_latitude"&gt;&lt;/input&gt;
    Destination Longitude &lt;input id="destination_longitude"&gt;&lt;/input&gt;
    Destination Latitude &lt;input id="destination_latitude"&gt;&lt;/input&gt;
   &lt;div&gt;
  
  
  
  &lt;script type="text/javascript"&gt; 
  function initialize() {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer({
      draggable: true
    });
  
    var myOptions = {
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    directionsDisplay.setMap(map);
  
  var request = {
      origin: new google.maps.LatLng(51.403650, -1.323252),
      destination: new google.maps.LatLng(51.403650, -1.323252),
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
  
  
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
          directions = directionsDisplay.getDirections();
          // Display the distance:
          document.getElementById('distance').value =
            directions.routes[0].legs[0].distance.value + " meters";
          // Display the duration:
          document.getElementById('duration').value =
            directions.routes[0].legs[0].duration.value + " seconds";
  
  
  
  
  
        })
      } else {
        alert("directions request failed:" + status)
      }
    });
  }
  google.maps.event.addDomListener(window, "load", initialize);
  
     &lt;/script&gt; 
  </code></pre>