How to get Directions from Source to Destination in ASP.NET using Google API ?


The following  article is shows about how to use Google maps with direction and distance in Asp.net application.

For that first I am taking two textboxes to enter From location and for To location ,one GetDirection button and one division to display map.
The following steps show the complete information:
1.       Open Visual StudioàFileàNewàASP.Net Empty WebsiteàGive the name as GooglemappingwithDirectionàOK
2.       Add one webpage to the solutions and give the name as GooglemapsDirection.aspx
3.       Design the form like the following:
4.       Write the following code in GooglemapsDirection.aspx source page using JavaScript.
   <form id=”form1″ runat=”server”>
    <div>
    <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script&gt;
<script language=”javascript” type=”text/javascript”>
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(17.425503, 78.47497);
        var myOptions =
        {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById(“Gmap”), myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById(‘directionpanel’));
        var control = document.getElementById(‘control’);
        control.style.display = ‘block’;
    }
    function calcRoute() {
        var start = document.getElementById(‘startvalue’).value;
        var end = document.getElementById(‘endvalue’).value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
    function btnDirections_onclick() {
        calcRoute();
    }
    window.onload = InitializeMap;
    </script>
<table id =”control”>
<tr>
<td class=”style1″>
<table>
<tr>
<td>From:</td>
<td>
    <input id=”startvalue” type=”text” style=”width: 305px” /></td>
</tr>
<tr>
<td>To:</td>
<td><input id=”endvalue” type=”text” style=”width: 301px” /></td>
</tr>
<tr>
<td align =”right”>
    <input id=”btnDirections” type=”button” value=”GetDirections”
        onclick=”return btnDirections_onclick()” /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign =”top”>
<div id =”directionpanel”  style=”height: 390px;overflow: auto” ></div>
</td>
<td valign =”top”>
<div id =”Gmap” style=”height: 390px; width: 489px”></div>
</td>
</tr>
</table>
    </div>
    </form>
Then build the application and run it , no need to write any code in GooglemapsDirection.aspx.cs file.
Then you will get output like the following:
For Example if you enter Hyderabad in From textbox ,Mumbai in To textbox and click Find button then you will get the following output with Hyderabad to Mumbai direction and Distance:

//

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s