yeasir007: Google Map

asp.net C# Google Map javaScript jquery 2012-10-18T20:24:00+06:00

Get Direction From Google Map Using Google Map API in asp.net

Get Direction From Google Map Using Google Map API in asp.net: Source code download link : download source code demo : .aspx cod...

Read article

Get Direction From Google Map Using Google Map API in asp.net:

Source code download link : download source code
demo :

.aspx code:

<!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></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaczGkYJhz_uP1Xo03sWxYnBB7R1NXzZE&sensor=false&libraries=places&language=eng&types=establishment"></script>

<script language="javascript" type="text/javascript">
function SearchAddressByGoogle(ControlName, e) {//this function will use to get search address from google
var options = {
           // types: ['(cities)'],
          componentRestrictions: { country: "bd" }
};
 var control = document.getElementById(ControlName);
 var autocomplete = new google.maps.places.Autocomplete(control, options);
}

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("divGoogleMap"), myOptions);

        directionsDisplay.setMap(map);

        var control = document.getElementById('tblControl');
        control.style.display = 'block';
    }

    function calcRoute() {//this function will use to get direction
        var start = document.getElementById('txtAddressFrom').value;
        var end = document.getElementById('txtAddressTo').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;//Load defult map
</script>
<style type="text/css">
    .textBox {
        width: 390px;
        overflow: auto;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
  <table id="tblControl">
  <tr>
     <td>
       <table>
         <tr>
         <td>From:</td>
         <td><asp:TextBox ID="txtAddressFrom" runat="server" CssClass="textBox"></asp:TextBox></td>
         </tr>
         <tr>
            <td>To:</td>
            <td><asp:TextBox ID="txtAddressTo" runat="server" CssClass="textBox"></asp:TextBox></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="divGoogleMap" style="height: 390px; width: 489px">
       </div>
      </td>
     </tr>
   </table>
 </div>
</form>
</body>
</html>

.cs code:

protected void(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        txtAddressFrom.Attributes.Add("onkeyUp", "SearchAddressByGoogle('" + txtAddressFrom.ClientID + "',event);");
        txtAddressTo.Attributes.Add("onkeyUp", "SearchAddressByGoogle('" + txtAddressTo.ClientID + "',event);");
    }
}