In this article I will explain how to calculate distance between two address / points / locations based on the coordinates i.e. Latitude and Longitude using Google Maps V3 API.

HTML Markup
The HTML Markup consists of two TextBoxes first one for entering Source address while the other for entering destination address, a Button and three HTML DIVs for displaying the distance and duration details, plotting map and displaying directions.
<tr>
<td colspan="2">
Source:
<input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />
&nbsp; Destination:
<input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />
<br />
<input type="button" value="Get Route" onclick="GetRoute()" />
<hr />
</td>
</tr>
<tr>
<td colspan="2">
<div id="dvDistance">
</div>
</td>
</tr>
<tr>
<td>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</td>
<td>
<div id="dvPanel" style="width: 500px; height: 500px">
</div>
</td>
</tr>
</table>

Calculate Distance, Travel Duration, draw (plot) Route and display Directions between two locations
Inside the Google Maps window load event handler, for the source and the destination TextBoxes I have implemented Google Places Autocomplete TextBox. For more details please refer Implement Google Places Autocomplete TextBox.
When the Button is clicked, first the Map and the Directions service is initialized to display the map and the directions in their respective HTML DIVs.
Then using the source and destination addresses from the respective TextBoxes, the details of the directions, route, distance and duration are displayed inside the respective HTML DIVs.
<script type="text/javascript">
var source, destination;
var directionsDisplay;
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});

function GetRoute() {
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapOptions = {
zoom: 7,
center: mumbai
};
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dvPanel'));

//*********DIRECTIONS AND ROUTE**********************//
source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;

var request = {
origin: source,
destination: destination,
};
directionsService.route(request, function (response, status) {
directionsDisplay.setDirections(response);
}
});

//*********DISTANCE AND DURATION**********************//
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
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 dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "<br />";
dvDistance.innerHTML += "Duration:" + duration;

} else {