Google maps VIII (distancia entre 2 puntos)

Google maps VIII (distancia entre 2 puntos)

Publicado por Quanticbyte en 6 noviembre, 2014
Categorias : GoogleMaps

Por todos es sabido que la Tierra es “redonda”, así que la distancia que separa 2 puntos en la Tierra describe un arco.
Hay que decir que google nos facilita enormemente la faena para calcular distancias, pero vamos por partes: cómo lo tendríamos que hacer manualmente y cómo hacerlo de manera rápida con google maps.

Para calcular la distancia entre 2 puntos en una esfera se utiliza la fórmula de Haversine. Tened en cuenta que esta fórmula asume que la Tierra es completamente esférica.

Una implementación en Javascript de ésta fórmula (sacada de stackoverflow) es la siguiente:

Vamos a probarla con un mapa.
Primero definimos las 2 posiciones con las que calcularemos la distancia:

Le pasamos los dos puntos a la fórmula y obtenemos:

8_2

*El resultado de ésta fórmula es en metros, porqué el diámetro de la tierra lo hemos puesto en metros.

Bueno, pero es que, como de costumbre, Google dispone de una librería para el cálculo con coordenadas.
Para poder cargar la librería al llamar la API de google maps, agregamos el parámetro libraries=geometry:

Ahora ya podemos operar con coordenadas. ¿Y qué cálculos podemos hacer?:
Calcular la distancia entre 2 coordenadas, calcular el punto medio entre 2 coordenadas, saber qué ángulo hay entre una coordenada y otra (dirección a la que nos tendríamos que dirigir) y más cosas.

Veamos cómo calcular la distancia que hay entre las 2 posiciones que teníamos con la función que nos proporciona google.
La funció : computeDistanceBetween()

Tenemos las 2 posiciones:

para calcular:

8_3

Vamos a probarlo con un ejemplo gráfico, con nuestros marcadores.
Creamos un mapa, con un marcador fijo (A) y otro que se pueda arrastrar (B). Al soltar (B), queremos que nos diga la distancia a la que se encuentra de (A).

Vemos como hemos cambiado el icono de marcador B para poderlo diferenciar. Los iconos básicos de colorines de google los tenéis en las siguientes url:

https://maps.google.com/mapfiles/ms/icons/blue-dot.png
https://maps.google.com/mapfiles/ms/icons/red-dot.png
https://maps.google.com/mapfiles/ms/icons/purple-dot.png
https://maps.google.com/mapfiles/ms/icons/yellow-dot.png
https://maps.google.com/mapfiles/ms/icons/green-dot.png

Bueno, a parte de los colorines, los marcadores, el dragable y todo lo que hemos visto, lo que nos interesa es el evento que le hemos colocado a marcador B: al dejar de arrastrarlo, calculamos la distancia entre pos_A (que es fija) y la posición en la que se encuentre en ese momento el marcador B.

8_4

8_5

Os dejo un ejemplo
Descarga

Vamos a modificar el primer ejemplo para calcular la distancia en base a 2 marcadores dragables.
En este caso, crearemos una función que calcule la distancia entre los 2 puntos, que será llamada con el evento ‘dragend’ de ambos.

Ejemplo:
Descarga

Otro ejemplo más completo sería tener 2 marcadores, que al moverlos calcule el punto medio entre ambos marcándolo con un 3r marcador no dragable.
El punto medio entre 2 coordenadas lo sacamos con la función interpolate(), que recibe como parámetros LatLng origen, LatLng destino y fracción a calcular.
En nuestro caso, para calcular el punto medio, la fracción será de 0.5
Veamos:

8_6

Ejemplo
Descarga

En la función calculaPuntoMedio(), primero miramos si la variable marcador_medio existe, si es el caso se borra del mapa y se pone a null.

Luego calculamos el punto medio de las posiciones de los marcadores que hemos pasado como parámetro con una fracción de 0.5.

Y finalmente creamos el marcador, guardándolo en una variable global.

Si hay algo que no quede suficientemente claro o tenéis otra manera de hacerlo… ¡comentad! 😉

7 comentarios
Avatar de jose higinio
jose higinio , 3 diciembre, 2015

como puedo poner 2 puntos en google maps que me diga el lugar de cada uno y la distancia entre ellos, gracias


Avatar de Quanticbyte
Quanticbyte , 21 enero, 2016

Buenas, mirate el ejemplo de los 2 marcadres dragables,si no entiendes algo comentalo , y la posición de cada marca la tienes en su lat,lon


Avatar de Juan Garcia
Juan Garcia , 19 mayo, 2017

Hola. Estupendo trabajo. Como puedo poner calcular la distancia de una marca nueva (con un click) a las marcas habidas del mapa y que la información de las mas cercanas las mande a un infowindows
(ejemplo farmacias mas cercanas a un pinto dado, ordenadas por distancia)
Gracias


Avatar de Andres
Andres , 18 julio, 2017

Amigo buenos ejemplos, pero no habrá una forma de dibujar un punto y desde ahí muestre una linea a varios puntos y muestre la distancia desde ese punto hacia el resto de puntos.


Avatar de Quanticbyte
Quanticbyte , 14 diciembre, 2017

Podrias poner los puntos en un array [punto_a,punto_b,…] y calcular la distancia con un bucle de punto_central -> punto_a, punto_central -> punto_b … Espero se entienda, si no ponte en contacto conmigo.


Avatar de José Mª Serrano Sánchez
José Mª Serrano Sánchez , 6 diciembre, 2018

Hola, muy bueno el aporte. Lo estaba buscando. Gracias


Avatar de Quanticbyte
Quanticbyte , 10 diciembre, 2018

Gracias! 😉



Responder a Quanticbyte Cancelar respuesta






Acepto la política de privacidad