Post
Ask Question
karthika pommudu

karthika pommudu

  • NA
  • 321
  • 34.6k

How to calculate the draggle locationicon to get distance

Dec 21 2018 1:06 AM
I have one more help that ...kindly help its very urgent need..(thanks by advance)
 
How can I calculate the draggle locationicon to get the calucate distance (here whenever we enter the source to destinate its will show the distance but I want to know by using the draggable icon to get the distance and duration)
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title></title>  
  5. <style type="text/css">  
  6. body  
  7. {  
  8. font-family: Arial;  
  9. font-size: 10pt;  
  10. }  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>  
  15. <script type="text/javascript">  
  16. var source, destination;  
  17. var directionsDisplay;  
  18. var directionsService = new google.maps.DirectionsService();  
  19. google.maps.event.addDomListener(window, 'load', function () {  
  20. new google.maps.places.SearchBox(document.getElementById('txtSource'));  
  21. new google.maps.places.SearchBox(document.getElementById('txtDestination'));  
  22. directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });  
  23. });  
  24.   
  25. function GetRoute() {  
  26. var mumbai = new google.maps.LatLng(18.9750, 72.8258);  
  27. var mapOptions = {  
  28. zoom: 7,  
  29. center: mumbai  
  30. };  
  31. map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);  
  32. directionsDisplay.setMap(map);  
  33. //directionsDisplay.setPanel(document.getElementById('dvPanel'));  
  34.   
  35. //*********DIRECTIONS AND ROUTE**********************//  
  36. source = document.getElementById("txtSource").value;  
  37. destination = document.getElementById("txtDestination").value;  
  38.   
  39. var request = {  
  40. origin: source,  
  41. destination: destination,  
  42. travelMode: google.maps.TravelMode.DRIVING  
  43. };  
  44. directionsService.route(request, function (response, status) {  
  45. if (status == google.maps.DirectionsStatus.OK) {  
  46. directionsDisplay.setDirections(response);  
  47. }  
  48. });  
  49.   
  50. //*********DISTANCE AND DURATION**********************//  
  51. var service = new google.maps.DistanceMatrixService();  
  52. service.getDistanceMatrix({  
  53. origins: [source],  
  54. destinations: [destination],  
  55. travelMode: google.maps.TravelMode.DRIVING,  
  56. unitSystem: google.maps.UnitSystem.METRIC,  
  57. avoidHighways: false,  
  58. avoidTolls: false  
  59. }, function (response, status) {  
  60. if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {  
  61. var distance = response.rows[0].elements[0].distance.text;  
  62. var duration = response.rows[0].elements[0].duration.text;  
  63. var dvDistance = document.getElementById("dvDistance");  
  64. dvDistance.innerHTML = "";  
  65. dvDistance.innerHTML += "Distance: " + distance + "<br />";  
  66. dvDistance.innerHTML += "Duration:" + duration;  
  67.   
  68. } else {  
  69. alert("Unable to find the distance via road.");  
  70. }  
  71. });  
  72. }  
  73. </script>  
  74. <table border="0" cellpadding="0" cellspacing="3">  
  75. <tr>  
  76. <td colspan="2">  
  77. Source:  
  78. <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />  
  79.   Destination:  
  80. <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />  
  81. <br />  
  82. <input type="button" value="Get Route" onclick="GetRoute()" />  
  83. <hr />  
  84. </td>  
  85. </tr>  
  86. <tr>  
  87. <td colspan="2">  
  88. <div id="dvDistance">  
  89. </div>  
  90. </td>  
  91. </tr>  
  92. <tr>  
  93. <td>  
  94. <div id="dvMap" style="width:300px; height:300px">  
  95. </div>  
  96. </td>  
  97. <td>  
  98. <div id="dvPanel" style="width:300px; height:300px">  
  99. </div>  
  100. </td>  
  101. </tr>  
  102. </table>  
  103. <br />  
  104. </body>  
  105. </html>

Answers (1)