Post
Ask Question

Draw Route Between Current Location and Destination On Google Maps in ASP.Net

The following is my aspx:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  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>  
  7.   
  8.     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
  9.   
  10.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">  
  11.     </script>  
  12.   
  13.     <%--Getting User Current Location--%>  
  14.   
  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.         }  
  21.   
  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.             };  
  32.   
  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.             });  
  39.   
  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>  
  47.   
  48.     <%--Getting Route Direction From User Current Location to Destination--%>  
  49.   
  50.     <script type="text/javascript">  
  51.         function SearchRoute() {  
  52.             document.getElementById("MyMapLOC").style.display = 'none';  
  53.   
  54.             var markers = new Array();  
  55.             var myLatLng;  
  56.   
  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);  
  66.   
  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();  
  86.   
  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);  
  106.   
  107.                             //***********ROUTING****************//  
  108.   
  109.                             //Initialize the Path Array.  
  110.                             var path = new google.maps.MVCArray();  
  111.   
  112.                             //Getting the Direction Service.  
  113.                             var service = new google.maps.DirectionsService();  
  114.   
  115.                             //Set the Path Stroke Color.  
  116.                             var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });  
  117.   
  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.                     });  
  145.   
  146.                 });  
  147.             }  
  148.             else {  
  149.                 alert('Some Problem in getting Geo Location.');  
  150.                 return;  
  151.             }  
  152.         }  
  153.     </script>  
  154.   
  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


Similar Articles