How to implement Google Mapping with Get Direction and distance from one location to another location in Asp.net using JavaScript || Google Map Searching with Get Direction in Web Application Asp.net using JavaScript with GoogleAPI.

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>

<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:

Thank you….