Implementing Google Place AutoComplete Textbox by Finding Road Distance Between Source And Destination

Here in this article I am going to explain how to use Google place AutoComplete textbox and find the accurate distance between the source and destination place using ASP.NET. AutoComplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your application to search words on the basis of characters entered by you. When a user starts typing an address, autocomplete will fill in the rest.

The following JavaScript is used to implement autocomplete location search textbox in your webpage. So to use this you have to use this javascript in your project.

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places

So I have the following design where I have two textboxes, one button and one label. There are two textboxes where I want to attach Google place autocomlete search and finally when I click the button it should display the exact distance between these two places and bind in the label to show me. So here is my designing form.

And here is the html code for the design.

<body>
<table border="0" cellpadding="0" cellspacing="3" style="border:solid; background-color:aqua;">
<tr>
<td>
<b>Source:</b>
</td>
</tr>
<tr>
<td>
<input type="text" id="txt_Source" style="width: 500px;height:30px" />
</td>
</tr>
<tr>
<td>
<b>Destination:</b>
</td>
</tr>
<tr>
<td>
<input type="text" id="txt_Destination" style="width: 500px;height:30px" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Get Distance" onclick="getdistance()" />
</td>
</tr>
<tr>
<td>
<asp:Label runat="server" ID="lbl_distance"></asp:Label>
</td>
</tr>
</table>
</body>

For implementing auto location search use the following JavaScript for both search and destination.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElementById('txt_Source'));
new google.maps.places.SearchBox(document.getElementById('txt_Destination'));
});
</script>

Now if we check source textbox it will be applied with the Google location Textbox as follows.

Now, let's check the second one, that is Destination Textbox:.

Now our second work is to calculate the distance between the source and destination entered in the textbox, so these are the places I want distance.

Now implement this JavaScript and call this on button click.

function getdistance() {
source = document.getElementById("txt_Source").value;
destination = document.getElementById("txt_Destination").value;
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
// var duration = response.rows[0].elements[0].duration.text;
var lbl_distance = "Distance: " + distance;
document.getElementById('lbl_distance').innerHTML = lbl_distance;
}
else {
alert("Unable to calculate distance.");
}
});
}

Now call this on button click. It will show the result as below.

Now we are getting the distance.

So in this way we will find the distance. Here I have posted the whole code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Distance.aspx.cs" Inherits="Distance" %>
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElementById('txt_Source'));
new google.maps.places.SearchBox(document.getElementById('txt_Destination'));
});
function getdistance() {
source = document.getElementById("txt_Source").value;
destination = document.getElementById("txt_Destination").value;
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
// var duration = response.rows[0].elements[0].duration.text;
var lbl_distance = "Distance: " + distance;
document.getElementById('lbl_distance').innerHTML = lbl_distance;
}
else {
alert("Unable to calculate distance.");
}
});
}
</script>
<table border="0" cellpadding="0" cellspacing="3" style="border:solid; background-color:aqua;">
<tr>
<td>
<b>Source:</b>
</td>
</tr>
<tr>
<td>
<input type="text" id="txt_Source" style="width: 500px;height:30px" />
</td>
</tr>
<tr>
<td>
<b>Destination:</b>
</td>
</tr>
<tr>
<td>
<input type="text" id="txt_Destination" style="width: 500px;height:30px" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Get Distance" onclick="getdistance()" />
</td>
</tr>
<tr>
<td>
<asp:Label runat="server" ID="lbl_distance"></asp:Label>
</td>
</tr>
</table>
</body>
</html>

Thus I discussed how to implement the Google Location AutoComplete search and find the distance between two locations.