How to change values based on place location dragging on google maps in javascript?

Question

I have the following webpage consisting of javascript code to display location on google maps. You can see the coordinates are being supplied in request to google maps. But I want it to accept coordinates via dragging on google maps. So if the user picks a location and drags it in google maps. The values in request object should change accordingly and hence in the display. Is there any function in google maps api to do that:

    <!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Directions Complex</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body style="font-family: Arial; font-size: 13px; color: red;"> 
   <div id="map" style="width: 400px; height: 300px;"></div> 
   <div id="duration">Duration: </div> 
   <div id="distance">Distance: </div> 

   <script type="text/javascript"> 

   var directionsService = new google.maps.DirectionsService();
   var directionsDisplay = new google.maps.DirectionsRenderer();

   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: 'Chicago', 
       destination: 'New York',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
   };
   */
   //Or by coordinates

   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) {

         // Display the distance:
         document.getElementById('distance').innerHTML += 
            response.routes[0].legs[0].distance.value + " meters";

         // Display the duration:
         document.getElementById('duration').innerHTML += 
            response.routes[0].legs[0].duration.value + " seconds";

         directionsDisplay.setDirections(response);
      }
   });
   </script> 
</body> 
</html>

Thanks in advance.

Answer 1

To make your rendered directions draggable, set draggable: true in the DirectionsRendererOptions

draggable | Type: boolean

If true, allows the user to drag and modify the paths of routes rendered by this DirectionsRenderer.

var directionsDisplay = new google.maps.DirectionsRenderer({
  draggable: true
});

Listen for the 'directions_changed' event on the DirectionsRenderer :

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  directions = directionsDisplay.getDirections();
  // Display the distance:
  document.getElementById('distance').innerHTML = directions.routes[0].legs[0].distance.value + " meters";
  // Display the duration:
  document.getElementById('duration').innerHTML = directions.routes[0].legs[0].duration.value + " seconds";
})

proof of concept fiddle

code snippet:

 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').innerHTML = directions.routes[0].legs[0].distance.value + " meters"; // Display the duration: document.getElementById('duration').innerHTML = directions.routes[0].legs[0].duration.value + " seconds"; }) } else { alert("directions request failed:" + status) } }); } google.maps.event.addDomListener(window, "load", initialize);

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

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="distance"></div> <div id="duration"></div> <div id="map"></div>

How to change values based on place location dragging on google maps in javascript?

Question

1 answers

solution1
1 ACCPTED 2016-03-26 00:28:19

How to change values based on place location dragging on google maps in javascript?

Question

1 answers

solution1 1 ACCPTED 2016-03-26 00:28:19

solution1
1 ACCPTED 2016-03-26 00:28:19