How to calculate the distance between two points in Google Maps with JavaScript?

To measure the distance between two points, a distance formula derived from the Pythagorean theorem is used. To find the distance between two points (x1, y1) and (x2, y2), what is required are the coordinates of the two points and apply the formula shown below.

Formula to obtain the distance between two coordinates of google maps. Next you have the code of the example


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Calculate distance between two latitude longitude points google maps api</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLMa7emvhGQMK0uYYrS-9aymoEhlX-4sU"></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: 350px;
            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: 11,                                    // Set Zoom Level
                center: new google.maps.LatLng(19.39812458609908, -99.1100109147653),     // 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();">
    <form id="form1" runat="server">
        <h1>Google maps distance from location to location</h1>
        <a href="#" onclick="MeasureDistance();" style="font-family: Verdana; font-size: 14px;">Click here to measure distance</a>
        <br />
        <br />

        <div id="divLength">
            <span style="font-family: Verdana; font-size: 14px; color: red"><b>Distance: 0 km</b></span>
        </div>
        <br />

        <div id="map-canvas">
        </div>
    </form>
</body>
</html>