Calculate distance between two points Google Maps JavaScript

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 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

Download Source Code

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.