How to measure the distance of drawing route path? - Google Maps Developer
Measure and calculate distance - Google Maps
In the previous article I explained about to draw interactive polyline path from source to destination in Google Maps v3, How to Animate Symbol on Multiple Polylines.
In this article I will show you how to measure the distance of drawing route path using Google Maps API v3. Find the source code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Measure the distance of drawing route path</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(19.15036,
72.94922),
mapTypeId:
google.maps.MapTypeId.TERRAIN
};
map = new
google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
trackingCoordinates = [
new google.maps.LatLng(19.00573, 72.84527),
new google.maps.LatLng(19.0275, 73.0579),
new google.maps.LatLng(19.1201, 72.849),
new google.maps.LatLng(19.20338, 72.85243)
];
var routePath = new google.maps.Polyline({
path: trackingCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
routePath.setMap(map);
ShowDistance(trackingCoordinates);
}
var i = 0; var trackingCoordinates = [];
//
Showing distance from LatLng array
function ShowDistance(trackingCoordinates) {
var distance = 0;
document.getElementById("spndistance").innerHTML
= "";
for (var k = 0; k < trackingCoordinates.length - 1; k++) {
getDistanceFromLatLonInKm(trackingCoordinates[k].lat(),
trackingCoordinates[k].lng(), trackingCoordinates[k + 1].lat(),
trackingCoordinates[k + 1].lng());
distance = i + distance;
}
document.getElementById("spndistance").innerHTML
= "Distance: " + distance.toFixed(2) + "
Km.";
}
//
Calculate distance from latitude and longitude
function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
var R = 6371; // Radius of the
earth in km
var dLat = deg2rad(lat2 - lat1); //
deg2rad below
var dLon = deg2rad(lon2 - lon1);
var a =
Math.sin(dLat / 2) *
Math.sin(dLat / 2) +
Math.cos(deg2rad(lat1)) *
Math.cos(deg2rad(lat2)) *
Math.sin(dLon / 2) *
Math.sin(dLon / 2)
;
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
i = R * c; // Distance in km
}
//
converting degree to radiun
function deg2rad(deg) {
return deg * (Math.PI / 180)
}
</script>
</head>
<body onload="initialize();">
<br />
<br />
<b><span id="spndistance" style="font-family: 'Trebuchet MS'; font-size: medium;"></span></b>
<br />
<br />
<div id="map-canvas" style="height: 500px"></div>
</body>
</html>
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!
How to measure the distance of drawing route path? - Google Maps Developer
Reviewed by Ravi Kumar
on
5:12 PM
Rating:
Reviewed by Ravi Kumar
on
5:12 PM
Rating:
No comments: