Aprende a determinar la distancia entre 2 marcadores en Google Maps con JavaScript.

Cómo calcular la distancia entre 2 marcadores (coordenadas) en Google Maps con JavaScript

Una de las necesidades más recurrentes de los desarrolladores cuando se trabaja con Google Maps, es cómo obtener la distancia entre 2 puntos diferentes en el mapa, generalmente definidos por Marcadores o simplemente por coordenadas simples, por ejemplo dado el siguiente código:

var map, markerA, markerB;

// Devolución de llamada ejecutada cuando se ha cargado el script de Google Maps
function initMap() {
    // 1. Inicializar mapa
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {
            lat: 6.066385702972249, 
            lng: -74.07493328924413
        }
    });

    // 2. Poner primer marcador en Bucaramanga
    markerA = new google.maps.Marker({
        position: {
            lat: 7.099473939079819, 
            lng: -73.10677064354888
        },
        map: map,
        icon: {
            url: 'http://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png'
        },
        title: "Marker A"
    });

    // 3. Poner segundo marcador en Bogotá
    markerB = new google.maps.Marker({
        position: {
            lat: 4.710993389138328, 
            lng: -74.07209873199463
        },
        map: map,
        icon: {
            url: 'http://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png'
        },
        title: "Marker B"
    });
}   

Esto colocará los 2 marcadores que aparecen en la imagen de este artículo. Según Google, podemos saber que la distancia de vuelo de Bucaramanga a Bogotá es de unos 280 Kilómetros:

Bucaramanga - Bogota Flight Distance

Entonces, teóricamente, esperaremos un valor aproximado de nuestros métodos para obtener la distancia entre las 2 coordenadas. En este artículo te mostraremos 2 formas de obtener la distancia entre 2 marcadores o coordenadas con JavaScript en Google Maps.

A. Uso del módulo de geometría de Google

De forma predeterminada, Google proporciona una forma personalizada de obtener la distancia entre 2 puntos en el mapa utilizando la biblioteca de geometría. Debe incluir esta biblioteca agregando el &librariesparámetro get a la URL de solicitud de la API de JS de Google Maps:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap&libraries=geometry"></script>

Una vez que esté seguro de haber cargado esta biblioteca, ahora puede obtener la distancia entre 2 coordenadas (objeto LatLng) de Google Maps a través del  método google.maps.geometry.spherical.computeDistanceBetween . Por ejemplo, si desea obtener la distancia entre 2 marcadores, simplemente puede ejecutar la siguiente instrucción:

// Obtenga la distancia en metros mediante el método computeDistanceBetween
// Desde la extensión de Google Maps
var distanceInMeters = google.maps.geometry.spherical.computeDistanceBetween(
    markerA.getPosition(),
    markerB.getPosition()
);

// Imprime : Distance in Meters:  286562.7470149898
console.log("Distancia en metros:", distanceInMeters);

// Imprime : Distance in Kilometers:  286.5627470149898
console.log("Distancia en kilómetros:", (distanceInMeters * 0.001));

Como puede ver, el método computeDistanceBetween espera como primer y segundo argumento un objeto LatLng. Calculará la distancia de esos 2 parámetros y devolverá el valor en metros. Depende de usted cambiar matemáticamente las unidades a Millas o Kilómetros. Alternativamente, si no está utilizando marcadores, puede proporcionar el objeto LatLng mencionado como argumentos con las coordenadas directas:

// Obtenga la distancia en metros mediante el método computeDistanceBetween
// Desde la extensión de Google Maps usando coordenadas simples
var distanceInMeters = google.maps.geometry.spherical.computeDistanceBetween(
    new google.maps.LatLng({
        lat: 7.099473939079819, 
        lng: -73.10677064354888
    }),
    new google.maps.LatLng({
        lat: 4.710993389138328, 
        lng: -74.07209873199463
    })
);

// Imprime: Distance in Meters:  286562.7470149898
console.log("Distancia en metros:", distanceInMeters);

// Imprime: Distance in Kilometers:  286.5627470149898
console.log("Distancia en kilómetros:", (distanceInMeters * 0.001));

B. Usando la fórmula de Haversine

Si en lugar de confiar en Google Maps, puede calcular la misma distancia basándose en la Fórmula de Haversine, una ecuación importante utilizada en la navegación, esto proporciona distancias de círculo máximo entre dos puntos en una esfera a partir de sus longitudes y latitudes. Es un caso especial de una fórmula más general en trigonometría esférica, la ley de las líneas lineales, que relaciona los lados y ángulos de los "triángulos" esféricos.

Para comenzar, incluya las 2 siguientes funciones en su código:

/**
 * Convierte grados a radianes.
 * 
 * @param degrees Number of degrees.
 */
function degreesToRadians(degrees){
    return degrees * Math.PI / 180;
}

/**
 * Devuelve la distancia entre 2 puntos de coordenadas en Google Maps
 * 
 * @see https://stackoverflow.com/a/1502821/4241030
 * @param lat1 Latitude of the point A
 * @param lng1 Longitude of the point A
 * @param lat2 Latitude of the point B
 * @param lng2 Longitude of the point B
 */
function getDistanceBetweenPoints(lat1, lng1, lat2, lng2){
    // El radio del planeta tierra en metros.
    let R = 6378137;
    let dLat = degreesToRadians(lat2 - lat1);
    let dLong = degreesToRadians(lng2 - lng1);
    let a = Math.sin(dLat / 2)
            *
            Math.sin(dLat / 2) 
            +
            Math.cos(degreesToRadians(lat1)) 
            * 
            Math.cos(degreesToRadians(lat1)) 
            *
            Math.sin(dLong / 2) 
            * 
            Math.sin(dLong / 2);

    let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    let distance = R * c;

    return distance;
}

La primera función le permite convertir un grado en radianes, necesario en la función de interés, el getDistanceBetweenPointsmétodo. En este caso, con una ligera modificación del fragmento original de RosettaCode. La función recibe cuatro argumentos que corresponden respectivamente a los valores de latitud y longitud de ambos puntos. Esta solución no depende de Google Maps, por lo que también se puede utilizar en otros proyectos:

// Obtenga la distancia en metros usando la fórmula de Haversine
var distanceInMeters = getDistanceBetweenPoints(
    // LatA
    7.099473939079819,
    // LongA
    -73.10677064354888,
    // LatB
    4.710993389138328,
    // LongB
    -74.07209873199463
);

// Imprime: Distance in Meters:  286476.96153465303
console.log("Distancia en metros:", distanceInMeters);

// Imprime: Distance in Kilometers:  286.476961534653
console.log("Distancia en kilómetros:", (distanceInMeters * 0.001));

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores