How To Display Updated Coordinates When Dragging Marker (draggable Directions) On The Map In Google Maps Javascript?

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 p

Solution 1:

Check out this example.

Just add

marker.addListener('position_changed', printMarkerLocation);

Then you can define the function

functionprintMarkerLocation(){
    console.log('Lat: ' + marker.position.lat() + ' Lng:' + marker.position.lng() );}

Solution 2:

How about getting markers' position during marker drag event? That should work.

Take a look at https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker

There are many event you can listen to.

Solution 3:

The start and end locations are in the directions response object. With the current request, you only have one leg, so those will be:

document.getElementById('origin_latitude').value = directions.routes[0].legs[0].start_location.lat();
document.getElementById('origin_longitude').value =  directions.routes[0].legs[0].start_location.lng();
document.getElementById('destination_latitude').value =  directions.routes[0].legs[0].end_location.lat(); 
document.getElementById('destination_longitude').value =  directions.routes[0].legs[0].end_location.lng();

code snippet:

functioninitialize() {
  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";
        document.getElementById('origin_latitude').value = directions.routes[0].legs[0].start_location.lat();
        document.getElementById('origin_longitude').value = directions.routes[0].legs[0].start_location.lng();
        document.getElementById('destination_latitude').value = directions.routes[0].legs[0].end_location.lat();
        document.getElementById('destination_longitude').value = directions.routes[0].legs[0].end_location.lng();
      })
    } else {
      alert("directions request failed:" + status)
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map"style="width: 400px; height: 300px;"></div>
Duration:
<inputid="duration" />Distance:
<inputid="distance" />Origin Longitude
<inputid="origin_longitude" />Origin Latitude
<inputid="origin_latitude" />Destination Longitude
<inputid="destination_longitude" />Destination Latitude
<inputid="destination_latitude" /><div>