html - How to get direction between two dropped markers using Google API and JavaScript -

i trying path between 2 dropped markers user , did before using 2 input fields trying direction between 2 dropped markers user. 2 markers dropped randomly user

<div style="margin-bottom: 10px;">         <label>location a: </label>         <label id="start" ></label>     </div>      <div style="margin-bottom: 10px;">         <label>location b :</label>         <label id="end" ></label>     </div>      <div style="margin-bottom: 10px;">          <button onclick="javascript:calculateroute()" type="button" style="width: 150px">calculate distance</button>         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label style="color: red; font-weight: bold" id="lbldistance"></label>     </div>      <div style="float: left; margin-top: 10px; margin-left: -3px;">          <button type="button" id="pathbtn" style="width: 115px">shortest path</button>     </div>  </div> 

javascript

function initialize() {   var long = parsefloat(document.getelementbyid("langitud").value); var lat = parsefloat(document.getelementbyid("latitud").value); var zoommap = parsefloat(document.getelementbyid("zoom").value) var disabledefaultuimap = document.getelementbyid("disabledefaultui").checked; var scrollwheelmap = document.getelementbyid("scrollwheel").checked; var draggablemap = document.getelementbyid("draggable").checked; var maxzoommap = parseint(document.getelementbyid("maxzoom").value); var minzoommap = parseint(document.getelementbyid("minzoom").value); var mycenter = new google.maps.latlng(long, lat); var maptype = parseint(document.getelementbyid("maptypeselect").value) var maptypeidmap; switch (maptype) {     case 1:         maptypeidmap = google.maps.maptypeid.roadmap;         break;     case 2:         maptypeidmap = google.maps.maptypeid.satellite;         break;     case 3:         maptypeidmap = google.maps.maptypeid.hybrid;         break;     case 4:         maptypeidmap = google.maps.maptypeid.terrain;         break; }    var mapprop = {     center: mycenter,     zoom: zoommap,     maptypeid: maptypeidmap,     disabledefaultui: disabledefaultuimap,     scrollwheel: scrollwheelmap,     draggable: draggablemap,     maxzoom: maxzoommap,     minzoom: minzoommap   };  var iconmarker =  document.getelementbyid("sc").innerhtml;  var conte = document.getelementbyid("conte").value;  var draggablemarker = document.getelementbyid("draggablemarker").checked;  var map = new google.maps.map(document.getelementbyid("map"), mapprop);    var listenerhandle = google.maps.event.addlistener(map, 'mousedown', function (e) {      var latlng = e.latlng;      marker = new google.maps.marker({         position: latlng,         map: map,         draggable: true,         icon: image      });      //// data mouse position     //mmovehandler = google.maps.event.addlistener(map, 'mousemove', function (e) {     marker.setposition(e.latlng);     //});       //google.maps.event.removelistener(listenerhandle);       document.getelementbyid("looo").innerhtml = "lattitude: " + e.latlng.lat() + '  <br/>   ' + "longitude: " + e.latlng.lng(); });   //-------------------- var image = {     url: iconmarker,     // marker 20 pixels wide 32 pixels high.     size: new google.maps.size(30, 32),     //// origin image (0, 0).     //origin: new google.maps.point(0, 0),     //// anchor image base of flagpole @ (0, 32).     //anchor: new google.maps.point(0, 32) };    var marker = new google.maps.marker({     position: mycenter,     map: map,     draggable: draggablemarker,     animation: google.maps.animation.bounce,     icon: image   });    var infowindow = new google.maps.infowindow({       content: conte, }); google.maps.event.addlistener(marker, 'click', function () {     infowindow.open(map, marker);  }); infowindow.open(map, marker); marker.setmap(map);   document.getelementbyid("cen").innerhtml = " new google.maps.latlng( " + long + " , " + lat + " )"; document.getelementbyid("zoo").innerhtml = " " + zoommap; document.getelementbyid("dis").innerhtml = " " + disabledefaultuimap; document.getelementbyid("swh").innerhtml = " " + scrollwheelmap; document.getelementbyid("drag").innerhtml =" "+ draggablemap; document.getelementbyid("maxzom").innerhtml = " " + maxzoommap; document.getelementbyid("minzom").innerhtml =" "+ minzoommap; document.getelementbyid("pos").innerhtml = " new google.maps.latlng( " + long + " , " + lat + " )"; document.getelementbyid("dra").innerhtml =" "+ draggablemarker; document.getelementbyid("contet").innerhtml = " " + conte; document.getelementbyid("mapt").innerhtml = " google.maps.maptypeid." + maptypeidmap.touppercase(); 

}

the google maps directions api requires 3 parameters:

origin - either latitute/longiture or plain text name departure point

destination - either latitute/longiture or plain text name arrival point

and api key of course

to use dropped markers on map, can coordinates using these functions on each of marker objects:

var lat = marker.getposition().lat(); var lng = marker.getposition().lng(); 

and pass coordinates on new asynchronous api call:

var target = 'https://maps.googleapis.com/maps/api/directions/json?orgin=' +originmarkercoords+'&destination=' +destinationmarkercoords+'&key='+apikey; 

ref: https://developers.google.com/maps/documentation/directions/intro

hope helps