Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Draw Route Between User Current Location and Destination On Google Map

Article:
Viewed:  2491 
Posted On:  14/02/2015 02:00:14 
How we can Draw Route Between User Current Location & Destination On Google Map? 

In this article I am going to explain how we can draw a route between user's current location and Destination address on Google Map.

Below is my aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Search Route Direction</title>
 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
    </script>
 
    <%--Getting User Current Location--%>
 
    <script type="text/javascript">
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success);

       
else {
            alert("There is Some Problem on your current browser to get Geo Location!");
        }
 
        function success(position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            var city = position.coords.locality;
            var LatLng = new google.maps.LatLng(lat, long);
            var mapOptions = {
                center: LatLng,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
 
            var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);
            var marker = new google.maps.Marker({
                position: LatLng,
                title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "
                            + lat + +"<br />Longitude: " + long
            });
 
            marker.setMap(map);
            var getInfoWindow = new google.maps.InfoWindow({ content: "<b>Your Current Location</b><br/> Latitude:" +
                                    lat + "<br /> Longitude:" + long + ""
            });
            getInfoWindow.open(map, marker);
        }
    </script>
 
    <%--Getting Route Direction From User Current Location to Destination--%>
 
    <script type="text/javascript">
        function SearchRoute() {
            document.getElementById("MyMapLOC").style.display = 'none';
 
            var markers = new Array();
            var myLatLng;
 
            //Find the current location of the user.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(p) {
                    var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
                    var m = {};
                    m.title = "Your Current Location";
                    m.lat = p.coords.latitude;
                    m.lng = p.coords.longitude;
                    markers.push(m);
 
                    //Find Destination address location.
                    var address = document.getElementById("txtDestination").value;
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ 'address': address }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            m = {};
                            m.title = address;
                            m.lat = results[0].geometry.location.lat();
                            m.lng = results[0].geometry.location.lng();
                            markers.push(m);
                            var mapOptions = {
                                center: myLatLng,
                                zoom: 4,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            };
                            var map = new google.maps.Map(document.getElementById("MapRoute"), mapOptions);
                            var infoWindow = new google.maps.InfoWindow();
                            var lat_lng = new Array();
                            var latlngbounds = new google.maps.LatLngBounds();
 
                            for (i = 0; i < markers.length; i++) {
                                var data = markers[i];
                                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                                lat_lng.push(myLatlng);
                                var marker = new google.maps.Marker({
                                    position: myLatlng,
                                    map: map,
                                    title: data.title
                                });
                                latlngbounds.extend(marker.position);
                                (function(marker, data) {
                                    google.maps.event.addListener(marker, "click"function(e) {
                                        infoWindow.setContent(data.title);
                                        infoWindow.open(map, marker);
                                    });
                                })(marker, data);
                            }
                            map.setCenter(latlngbounds.getCenter());
                            map.fitBounds(latlngbounds);
 
                           
                            //Initialize the Path Array.
                            var path = new google.maps.MVCArray();

                            
//Getting the Direction Service.
                            var service = new google.maps.DirectionsService();
 
                            //Set the Path Stroke Color.
                            var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
 
                            //Loop and Draw Path Route between the Points on MAP.
                            for (var i = 0; i < lat_lng.length; i++) {
                                if ((i + 1) < lat_lng.length) {
                                    var src = lat_lng[i];
                                    var des = lat_lng[i + 1];
                                    path.push(src);
                                    poly.setPath(path);
                                    service.route({
                                        origin: src,
                                        destination: des,
                                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                                    }, function(result, status) {
                                        if (status == google.maps.DirectionsStatus.OK) {
                                            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                                path.push(result.routes[0].overview_path[i]);
                                            }

                                        
else {
                                            alert("Invalid location.");
                                            window.location.href = window.location.href;
                                        }
                                    });
                                }
                            }
                        else {
                            alert("Request failed.")
                        }
                    });
 
                });
            }
            else {
                alert('Some Problem in getting Geo Location.');
                return;
            }
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <table style="bordersolid 15px bluewidth100%vertical-aligncentral;">
        <tr>
            <td style="padding-left20pxpadding-top20pxpadding-bottom20pxbackground-colorskyblue;
                text-aligncenterfont-familyVerdanafont-size20ptcolorGreen;">
                Draw Route Between User's Current Location & Destination On Google Map
            </td>
        </tr>
        <tr>
            <td style="background-colorskybluetext-aligncenterfont-familyVerdanafont-size14pt;
                colorred;">
                <b>Enter Destination:</b>
                <input type="text" id="txtDestination" value="" style="width200px" />
                <input type="button" value="Search Route" onclick="SearchRoute()" />
            </td>
        </tr>
        <tr>
            <td>
                <div id="MyMapLOC" style="width550pxheight470px">
                </div>
                <div id="MapRoute" style="width500pxheight500px">
                </div>
            </td>
        </tr>
    </form>
</body>
</html>


Now run your application:

1.png

Image 1.

Enter your destination to draw route.

2.png

Image 2.

3.png

Image 3.

4.png

Image 4.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us