Please refer this code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var data = {};
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', InitializeMap);
function InitializeMap() {
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
var myOptions =
{
zoom: 4,
center: new google.maps.LatLng(21.0000, 78.0000),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mappy"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionpanel'));
var control = document.getElementById('control');
control.style.display = 'block';
var svalue = (document.getElementById('startvalue'));
var svalueBox = new google.maps.places.SearchBox((svalue));
var evalue = (document.getElementById('endvalue'));
var evalueBox = new google.maps.places.SearchBox((evalue));
}
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 Button1_onclick() {
calcRoute();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="grid_10">
<div class="box round">
<h2>
<asp:Label ID="Label1" runat="server"></asp:Label>
Find Distance</h2>
<div class="block">
<input id="locationroot" type="hidden" />
<asp:HiddenField ID="myHiddenInput" runat="server" />
<table class="form">
<tr>
<td>
<input id="startvalue" type="text" style="width: 305px" placeholder="From..." />
</td>
</tr>
<tr>
<td>
<input id="endvalue" type="text" style="width: 301px" placeholder="To..." />
</td>
</tr>
<tr>
<td>
<input id="Button1" type="button" value="Get Directions" onclick="return Button1_onclick()"
class="btn" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="mappy" style="width: 500px; height: 500px">
</div>
</td>
</tr>
<tr id="control">
<td>
<div id="directionpanel" style="height: 390px; overflow: auto">
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="clear">
</div>
</form>
</body>
</html>
Demo