title: Update latitude and longitude overview_path google maps
body: <p>Hope someone can help me with a little problem I have with google maps API v3.</p>
  
  <p>I am developing a web page where you can select an origin and destination, and it calculates the route, and all the latitude and longitude coordinates, and I can move the markers.</p>
  
  <p>The problem is that when I move a marker, I want the Coordinates panel to be updated with the new values, but it does not.</p>
  
  <p>I am adding the code and a pair of images, hopeing someone can help.</p>
  
  <p>Thanks a lot!</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      var rendererOptions = {
          draggable: true
      };
      var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
      var directionsService = new google.maps.DirectionsService();
      var map;
  
      var trucka = new google.maps.LatLng(21.984797, -102.27668);
  
      function initialize() {
  
          var mapOptions = {
              zoom: 7,
              center: trucka
          };
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          directionsDisplay.setMap(map);
          //directionsDisplay.setPanel(document.getElementById('directionsPanel'));
          directionsDisplay.setPanel(document.getElementById('hola'));
  
  
          google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
              computeTotalDistance(directionsDisplay.getDirections());
          });
  
          calcRoute();
      }
  
      function calcRoute() {
          alert('carajo');
          var lat = document.getElementById('hdnLatitudOrigen').value;
          var lon = document.getElementById('hdnLongitudOrigen').value;
          var request = {
              origin: new google.maps.LatLng(lat, lon),
              destination: new google.maps.LatLng(document.getElementById('hdnLatitudDestino').value, document.getElementById('hdnLongitudDestino').value),
              /* waypoints: [
                   { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada1').value, document.getElementById('hdnLongitudParada1').value) },
                   { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada2').value, document.getElementById('hdnLongitudParada2').value) },
                   { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada3').value, document.getElementById('hdnLongitudParada3').value) },
                   { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada4').value, document.getElementById('hdnLongitudParada4').value) },
                   { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada5').value, document.getElementById('hdnLongitudParada5').value) }
               ],*/
              travelMode: google.maps.TravelMode.DRIVING,
              provideRouteAlternatives: true,
              avoidHighways: false,
              avoidTolls: false
          };
          directionsService.route(request, function (response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                  if (response.routes &amp;&amp; response.routes.length &gt; 0) {
                      var routes = response.routes;
                      for (var j = 0; j &lt; routes.length; j++) {
                          var points = routes[j].overview_path;
                          var ul = document.getElementById("vertex");
                          for (var i = 0; i &lt; points.length; i++) {
                              var li = document.createElement('li');
                              li.innerHTML = getLiText(points[i]);
                              ul.appendChild(li);
                          }
                      }
                  }
              }
          });
      }
  
      function getLiText(point) {
          var lat = point.lat(),
              lng = point.lng();
          return "lat: " + lat + " lng: " + lng;
      }
  
      function computeTotalDistance(result) {
          var total = 0;
          var myroute = result.routes[0];
          for (var i = 0; i &lt; myroute.legs.length; i++) {
              total += myroute.legs[i].distance.value;
          }
          total = total / 1000.0;
          document.getElementById('total').innerHTML = total + ' km';
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  
  &lt;/script&gt;
  
  &lt;div id="map-canvas" style="float: left; width: 70%; height: 100%"&gt;&lt;/div&gt;
  &lt;div id="hola"&gt;
      &lt;label&gt;Puntos&lt;/label&gt;
      &lt;ul id="vertex"&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="directionsPanel" style="float: right; width: 30%; height 100%"&gt;
      &lt;p&gt;Total Distance: &lt;span id="total"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/zOko1.jpg" alt="Original route">
  <img src="https://i.stack.imgur.com/pqqaf.jpg" alt="New route"></p>