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

Estrada Web Group
Administrador
How to calculate the distance between two points in Google Maps with JavaScript?

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>

 

Compartir artículo:

Más artículos geniales

Variables y tipos de datos en JavaScript

Variables y tipos de datos en JavaScript

En Javascript una variable es un nombre dado a una ubicación de memoria. Es la unidad básica de almacenamiento en un programa.

Ver artículo completo
Cómo usar los bucles en JavaScript con For, While o Do While

Cómo usar los bucles en JavaScript con For, While o Do While

En este artículo, explicare el uso básico de las estructuras de control para producir bucles o repeticiones. Los bucles pueden ejecutar bloques de código cualquier cantidad de veces que sea necesario.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla
;