Obtener las coordenadas de un punto en un mapa creado con la API de Google Maps

 In trucos

Si bien ya he escrito un artículo para obtener las coordenadas de un punto en Google Maps, el mismo se enfocaba al servicio propio de Google al cual podemos acceder en maps.google.com, pero debido a un comentario me di cuenta que me quedo pendiente la forma de obtener las coordenadas de un punto en un mapa creado por nosotros con la API de Google Maps.

“Supongamos que tenemos un mapa en una web y queremos que aparezca una marca en un punto del mapa cuando hacemos click ahí. ¿Como hacemos para capturar las coordenadas donde hemos hecho click y pasarselas a la función JavaScript que pinta la marca?” –Duque

Para darle solución a este planteo yo propongo el siguiente código que le asigna un evento al mapa que tengamos creado, y que se lleva a cabo cuando se hace click sobre alguna parte del mismo.

A grandes rasgos lo que se hace es tomar la latitud y longitud del punto donde se ha hecho click y asignar estos valores a dos variables (latitud y longitud). A si mismo se combinan las dos en una única variable (coordenadas) sin ningún fin en particular más que mostrar las diferentes formas de manipular estos datos.

En el código también he considerado la creación de un marcador en base a las coordenadas obtenidas, es por esto que utilizo la clase google.maps.LatLngpara crear un punto geográfico y luego si llevar a cabo la creación y posicionamiento del marcador.

Ver demostración

Queda en la capacidad de cada uno adaptar mi código a las necesidades particulares de cada proyecto, pero los pasos a seguir son básicamente los mismos: se crea un evento que se dispara al hacer click en el mapa, se obtienen las coordenadas con la latitud y longitud separadas y se las asigna a una o diferentes variables. De ahí en adelante, como ya tenemos en nuestro poder las coordenadas, podemos hacer lo que queramos.

Recent Posts

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt