The following is my aspx:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title>Search Route Direction</title>
  8. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  10. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
  11. </script>
  13. <%--Getting User Current Location--%>
  15. <script type="text/javascript">
  16. if (navigator.geolocation) {
  17. navigator.geolocation.getCurrentPosition(success);
  18. } else {
  19. alert("There is Some Problem on your current browser to get Geo Location!");
  20. }
  22. function success(position) {
  23. var lat = position.coords.latitude;
  24. var long = position.coords.longitude;
  25. var city = position.coords.locality;
  26. var LatLng = new google.maps.LatLng(lat, long);
  27. var mapOptions = {
  28. center: LatLng,
  29. zoom: 12,
  30. mapTypeId: google.maps.MapTypeId.ROADMAP
  31. };
  33. var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);
  34. var marker = new google.maps.Marker({
  35. position: LatLng,
  36. title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "
  37. + lat + +"<br />Longitude: " + long
  38. });
  40. marker.setMap(map);
  41. var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" +
  42. lat + "<br /> Longitude:" + long + ""
  43. });
  44. getInfoWindow.open(map, marker);
  45. }
  46. </script>
  48. <%--Getting Route Direction From User Current Location to Destination--%>
  50. <script type="text/javascript">
  51. function SearchRoute() {
  52. document.getElementById("MyMapLOC").style.display = 'none';
  54. var markers = new Array();
  55. var myLatLng;
  57. //Find the current location of the user.
  58. if (navigator.geolocation) {
  59. navigator.geolocation.getCurrentPosition(function(p) {
  60. var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
  61. var m = {};
  62. m.title = "Your Current Location";
  63. m.lat = p.coords.latitude;
  64. m.lng = p.coords.longitude;
  65. markers.push(m);
  67. //Find Destination address location.
  68. var address = document.getElementById("txtDestination").value;
  69. var geocoder = new google.maps.Geocoder();
  70. geocoder.geocode({ 'address': address }, function(results, status) {
  71. if (status == google.maps.GeocoderStatus.OK) {
  72. m = {};
  73. m.title = address;
  74. m.lat = results[0].geometry.location.lat();
  75. m.lng = results[0].geometry.location.lng();
  76. markers.push(m);
  77. var mapOptions = {
  78. center: myLatLng,
  79. zoom: 4,
  80. mapTypeId: google.maps.MapTypeId.ROADMAP
  81. };
  82. var map = new google.maps.Map(document.getElementById("MapRoute"), mapOptions);
  83. var infoWindow = new google.maps.InfoWindow();
  84. var lat_lng = new Array();
  85. var latlngbounds = new google.maps.LatLngBounds();
  87. for (i = 0; i < markers.length; i++) {
  88. var data = markers[i];
  89. var myLatlng = new google.maps.LatLng(data.lat, data.lng);
  90. lat_lng.push(myLatlng);
  91. var marker = new google.maps.Marker({
  92. position: myLatlng,
  93. map: map,
  94. title: data.title
  95. });
  96. latlngbounds.extend(marker.position);
  97. (function(marker, data) {
  98. google.maps.event.addListener(marker, "click", function(e) {
  99. infoWindow.setContent(data.title);
  100. infoWindow.open(map, marker);
  101. });
  102. })(marker, data);
  103. }
  104. map.setCenter(latlngbounds.getCenter());
  105. map.fitBounds(latlngbounds);
  107. //***********ROUTING****************//
  109. //Initialize the Path Array.
  110. var path = new google.maps.MVCArray();
  112. //Getting the Direction Service.
  113. var service = new google.maps.DirectionsService();
  115. //Set the Path Stroke Color.
  116. var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
  118. //Loop and Draw Path Route between the Points on MAP.
  119. for (var i = 0; i < lat_lng.length; i++) {
  120. if ((i + 1) < lat_lng.length) {
  121. var src = lat_lng[i];
  122. var des = lat_lng[i + 1];
  123. path.push(src);
  124. poly.setPath(path);
  125. service.route({
  126. origin: src,
  127. destination: des,
  128. travelMode: google.maps.DirectionsTravelMode.DRIVING
  129. }, function(result, status) {
  130. if (status == google.maps.DirectionsStatus.OK) {
  131. for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
  132. path.push(result.routes[0].overview_path[i]);
  133. }
  134. } else {
  135. alert("Invalid location.");
  136. window.location.href = window.location.href;
  137. }
  138. });
  139. }
  140. }
  141. } else {
  142. alert("Request failed.")
  143. }
  144. });
  146. });
  147. }
  148. else {
  149. alert('Some Problem in getting Geo Location.');
  150. return;
  151. }
  152. }
  153. </script>
  155. </head>
  156. <body>
  157. <form id="form1" runat="server">
  158. <table style="border: solid 15px blue; width: 100%; vertical-align: central;">
  159. <tr>
  160. <td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue;
  161. text-align: center; font-family: Verdana; font-size: 20pt; color: Green;">
  162. Draw Route Between User's Current Location & Destination On Google Map
  163. </td>
  164. </tr>
  165. <tr>
  166. <td style="background-color: skyblue; text-align: center; font-family: Verdana; font-size: 14pt;
  167. color: red;">
  168. <b>Enter Destination:</b>
  169. <input type="text" id="txtDestination" value="" style="width: 200px" />
  170. <input type="button" value="Search Route" onclick="SearchRoute()" />
  171. </td>
  172. </tr>
  173. <tr>
  174. <td>
  175. <div id="MyMapLOC" style="width: 550px; height: 470px">
  176. </div>
  177. <div id="MapRoute" style="width: 500px; height: 500px">
  178. </div>
  179. </td>
  180. </tr>
  181. </form>
  182. </body>
  183. </html>

Now run the application.

current location

Enter your destination to draw a route.

enter destination

agra destination

mumbai destination