How to measure the distance of drawing route path? - Google Maps Developer

random

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:

Measure the length of a path, running route, or border using Google

Default.aspx
<!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>

Download the source code click here
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: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.