In this blog post, you will learn how to calculate the distance between two points using the Google Maps JavaScript API. In the previous article, I have explained How to get current location in Google Maps using JavaScript, How to customize Google Maps InfoWindow.
How to calculate the distance between two points?
Let’s get started with a program. You are given two coordinates (x1, y1) and (x2, y2) of a two-dimensional graph. Find the distance between them.
For example:
Input : x1, y1 = (3, 4) | x2, y2 = (7, 7)
Output: 5
To resolve this we will use the distance formula derived from the Pythagorean theorem as shown below. 
The above formula finds the length of a line that stretches between two points: Point 1 and Point 2 The linear distance is the square root of the square of the horizontal distance plus the square of the vertical distance between two points
Calculate distance between two points Google Maps JavaScript
In the following example, you will learn how to measure the distance between two points using google maps API. Find the full source code below:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Google maps api calculate distance between two points javascript</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YourAPIKey"></script>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" src="utility.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 400px;
width: auto;
}
</style>
<script type="text/javascript">
var map;
var infoHandler;
var DistanceBearingPolyline;
var isDistanceFlag = false;
var DistBearingPolylineClickHdl = 0;
var DistBearingMapClickHdl = 0;
var InfoWindowCloseClickHdl = 0;
function initialize() {
var mapOptions = {
zoom: 12, // Set Zoom Level
center: new google.maps.LatLng(28.667696, 77.224059), // Set the Latitude and longitude of the location
mapTypeId: google.maps.MapTypeId.ROADMAP // Set Map Type Here ROADMAP, TERRAIN, SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'), // Creating the map object to desplay
mapOptions);
/*Global mousemove event, developer has to manage the event while coding to use flags for different functionalities*/
google.maps.event.addListener(map, 'mousemove', function (event) {
// $('#divCoords').html(roundNumber(event.latLng.lat(), 5) + "," + roundNumber(event.latLng.lng(), 5));
if (isDistanceFlag) {
if (DistanceBearingPolyline != null) {
var path = DistanceBearingPolyline.getPath();
var len = path.getLength();
$('#divLength').html("<span>Length: " + DistanceBearingPolyline.inKm() + " km</span>");
if (len == 1) {
path.push(event.latLng);
} else {
path.setAt(len - 1, event.latLng);
}
}
}
});
}</script>
</head>
<body onload="initialize();" style="font-family:Verdana">
<h2>Calculate distance between two points google maps javascript</h2>
<a href="#" onclick="MeasureDistance();">Click here to measure distance using google maps</a>
<br /><br />
<div id="divLength">
<span><b>Distance: 0 km</b></span>
</div><br />
<div id="map-canvas">
</div>
</body>
</html>Demo
Conclusion
I hope you liked this article on Google maps API calculates the distance between two points javascript. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Leave a Reply