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

 In trucos
[include slug="includes/ad1"]

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.

<span class="kwd">function</span><span class="pln"> inicializacion</span><span class="pun">()</span> <span class="pun">{</span>
     <span class="com">//Creo un nuevo mapa situado en Buenos Aires, Argentina, con 13 de Zoom y del tipo ROADMAP</span>
     <span class="kwd">var</span><span class="pln"> mapa </span><span class="pun">=</span> <span class="kwd">new</span><span class="pln"> google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="typ">Map</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"mapa"</span><span class="pun">),{</span><span class="pln">center</span><span class="pun">:</span> <span class="kwd">new</span><span class="pln"> google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="typ">LatLng</span><span class="pun">(-</span><span class="lit">34.60371794474704</span><span class="pun">,</span> <span class="pun">-</span><span class="lit">58.38158369064331</span><span class="pun">),</span><span class="pln">zoom</span><span class="pun">:</span> <span class="lit">13</span><span class="pun">,</span><span class="pln">mapTypeId</span><span class="pun">:</span><span class="pln"> google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="typ">MapTypeId</span><span class="pun">.</span><span class="pln">ROADMAP</span><span class="pun">});</span>

     <span class="com">//Creo un evento asociado a "mapa" cuando se hace "click" sobre el</span><span class="pln">
     google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="kwd">event</span><span class="pun">.</span><span class="pln">addListener</span><span class="pun">(</span><span class="pln">mapa</span><span class="pun">,</span> <span class="str">"click"</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">evento</span><span class="pun">)</span> <span class="pun">{</span>
     <span class="com">//Obtengo las coordenadas separadas</span>
     <span class="kwd">var</span><span class="pln"> latitud </span><span class="pun">=</span><span class="pln"> evento</span><span class="pun">.</span><span class="pln">latLng</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">();</span>
     <span class="kwd">var</span><span class="pln"> longitud </span><span class="pun">=</span><span class="pln"> evento</span><span class="pun">.</span><span class="pln">latLng</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">();</span>

     <span class="com">//Puedo unirlas en una unica variable si asi lo prefiero</span>
     <span class="kwd">var</span><span class="pln"> coordenadas </span><span class="pun">=</span><span class="pln"> evento</span><span class="pun">.</span><span class="pln">latLng</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">()</span> <span class="pun">+</span> <span class="str">", "</span> <span class="pun">+</span><span class="pln"> evento</span><span class="pun">.</span><span class="pln">latLng</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">();</span>

    <span class="com">//Las muestro con un popup</span><span class="pln">
     alert</span><span class="pun">(</span><span class="pln">coordenadas</span><span class="pun">);</span>

     <span class="com">//Creo un marcador utilizando las coordenadas obtenidas y almacenadas por separado en "latitud" y "longitud"</span>
     <span class="kwd">var</span><span class="pln"> coordenadas </span><span class="pun">=</span> <span class="kwd">new</span><span class="pln"> google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="typ">LatLng</span><span class="pun">(</span><span class="pln">latitud</span><span class="pun">,</span><span class="pln"> longitud</span><span class="pun">);</span> <span class="com">/* Debo crear un punto geografico utilizando google.maps.LatLng */</span>
     <span class="kwd">var</span><span class="pln"> marcador </span><span class="pun">=</span> <span class="kwd">new</span><span class="pln"> google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">({</span><span class="pln">position</span><span class="pun">:</span><span class="pln"> coordenadas</span><span class="pun">,</span><span class="pln">map</span><span class="pun">:</span><span class="pln"> mapa</span><span class="pun">,</span><span class="pln"> animation</span><span class="pun">:</span><span class="pln"> google</span><span class="pun">.</span><span class="pln">maps</span><span class="pun">.</span><span class="typ">Animation</span><span class="pun">.</span><span class="pln">DROP</span><span class="pun">,</span><span class="pln"> title</span><span class="pun">:</span><span class="str">"Un marcador cualquiera"</span><span class="pun">});</span>
     <span class="pun">});</span> <span class="com">//Fin del evento</span>
<span class="pun">}</span> <span class="com">// Fin inicializacion()</span>

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

Notice: Undefined index: quick_contact_gdpr_consent in /home/hcspmsoc/public_html/wp-content/themes/jupiter/views/footer/quick-contact.php on line 46

Notice: Undefined index: third_party_gdpr in /home/hcspmsoc/public_html/wp-content/themes/jupiter/framework/helpers/wp_footer.php on line 60