Get Markers Addresses in Input fields using Drag-able Google Maps API V3

Question

I am using Google Maps API V3 drag-able markers with auto-suggest in FROM and TO Field. After Clicking Show Route I get Map with 2 Markers A and B. If I change Marker A or B it Shows Updated Location in Navigation (directionsPanel). I need These Locations in FROM NEW MARKER ADDRESS: And TO NEW MARKER ADDRESS: Input fields when markers A and B dragged.A is for FROM and B is for TO Location. I searched on google and read API Details but did not find a solution. I need to insert these updated marker location (addresses) in Database for future references. Thanks in Advance.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Map Finalized</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #directionsPanel{
      overflow-y:auto;
      width:40%;
      height:200px;
      }

    input[type="text"] {
    width: 350px;
    height:30px;
}

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>‌
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>

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

var start_pos = new google.maps.LatLng(33.7167,73.0667);

function initialize() {

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(69.386,29.967),
new google.maps.LatLng(69.3451155,30.3753205)
);

  var mapOptions = {
    bounds:defaultBounds,
    zoom:17,
    center: start_pos
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var from = (document.getElementById('from'));
  var to = (document.getElementById('to'));
  var autocomplete = new google.maps.places.Autocomplete(from);
  var autocomplete = new google.maps.places.Autocomplete(to);
  autocomplete.bindTo('defaultBounds', map);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));
  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });
  calcRoute();
  codeAddress();
}


function calcRoute() {
  var request = {
    origin: document.getElementById('from').value,
    destination: document.getElementById('to').value,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < 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);
  </script>

  <script>
$(document).ready(function(){
$('button').on('click',initialize);
}); 
</script>

  </head>
  <body>
    <div id="map-canvas" style="float:left;width:60%; height:100%"></div>

    <div id="from_to">
    FROM: <input id="from" class="controls" type="text" placeholder="Enter a location">
    <br/><br/><hr/>
    TO:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="to" class="controls" type="text" placeholder="Enter a location">
    <br/><hr/>
    <button id="btn_refresh">Show route</button>
    <p>Total Distance: <span id="total"></span></p>
    </div>
    NAVIGATION:
    <div id="directionsPanel">
    </div>

    FROM NEW MARKER ADDRESS: <input type="text" id="addressmarker1" size="30">
    <br/><br/><hr/>
    TO NEW MARKER ADDRESS: <input type="text" id="addressmarker2" size="30">

  </body>
</html>

Don't you want to call the codeAddress function within the directions_changed event listener? Btw. Where is this function? — MrUpsidown
I need navigation A and B Updated Address in input fields. I do not know about function — Furqan Aziz
You're loading in the Maps API twice, which isn't a good thing. Just do <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> — duncan
Thanks. Please help me to find exact Soultion. I have remove twice loading — Furqan Aziz

Mohsin Ali Mohsin Ali · Accepted Answer · 2014-10-13T17:43:33

Try this:

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  var directionsList = directionsDisplay.getDirections();
  computeTotalDistance(directionsList);
  document.getElementById("from").value = directionsList.routes[0].legs[0]["start_address"];
  document.getElementById("to").value = directionsList.routes[0].legs[0]["end_address"];
});

You can also access other values:

//DISTANCE
document.getElementById("distance").value = directionsList.routes[0].legs[0]["distance"]["text"];
//DURATION
	document.getElementById("duration").value = directionsList.routes[0].legs[0]["duration"]["text"];	
//LATLNG POINT A
	document.getElementById("fromLatLng").value = directionsList.routes[0].legs[0]["start_location"]["k"] + "," + directionsList.routes[0].legs[0]["start_location"]["B"] ;

//LATLNG POINT B
	document.getElementById("toLatLng").value = directionsList.routes[0].legs[0]["end_location"]["k"] + "," + directionsList.routes[0].legs[0]["end_location"]["B"];

Please marked it solved if it helped

Get Markers Addresses in Input fields using Drag-able Google Maps API V3

1 Answers