#latitud

Quieres mas Más de 112 horas de contenido de Power BI? Especialización en Power BI Integral … source

Las coordenadas astronómicas son sistemas de referencia utilizados para localizar objetos en el cielo. Existen varios sistemas de coordenadas, entre los cuales se incluyen las coordenadas ecuatoriales y las coordenadas altazimutales. Comenzaremos con las que usamos en la Tierra para localizar un punto geográfico, para así ver su analogía con el cielo: Coordenadas Geográficas Latitud: Es la…

¿Sabes que es un Recurso Geográfico y cuál es su alcance en la vida rutinaria?

En la Foto: ¿A dónde quieres ir? En su momento la humanidad no imaginaba que las tecnologías de la información (TIC) a través de los Sistemas de Geoposicionamiento Global (GPS) vendrían a formar parte vital de nuestra cotidianidad. La ubicación en tiempo real nos permite realizar diversas actividades de forma inmediata. Los recursos Geográficos Sistema de Geoposisionamiento Global Tiene como…

Obtener coordenadas de Mapa al hacer click - Google Maps aparece primero en nuestro https://jonathanmelgoza.com/blog/obtener-coordenadas-de-mapa/

Si estás implementando un sistema con mapas entonces este artículo te será de utilidad, te enseño como obtener coordenadas de mapa al hacer clic en él, obtener latitud y longitud de un mapa de Google Maps fácil y rápido.

Muchas tenemos que desarrollar sistemas web con mapas.

En estos sistemas suele ser muy común que el usuario indique un lugar exacto en el mapa.

Para hacer esto se permite que el usuario haga clic en el mapa o arrastre un marcador.

En este caso nos inclinaremos por la primera opción, el usuario deberá hacer clic en el mapa donde quiera ubicarse.

Actualmente, estamos desarrollando un sistema inmobiliario y el usuario al crear una nueva propiedad deberá señalar la ubicación.

Para obtener coordenadas  de mapa al hacer clic solo debemos hacer 3 sencillos pasos.

Creamos el mapa en HTML

Lo primero será crear un contenedor con id mapa en html.

<div id="map" style="height: 500px;margin: 20px 0px;"></div>

Colocamos unos estilos cualquiera, pero es importante definir una altura.

Ahora será necesario llamar un script de Google Maps:

<script src="https://maps.googleapis.com/maps/api/js?key=[TU API KEY]&callback=initMap&v=weekly" async></script>

Recuerda agregar tu API KEY, esta la puedes obtener en la página de Google Console en la sección de bibliotecas.

Únicamente debes buscar la biblioteca Google Maps API JavaScript y activarla, después ir a credenciales y crear una nueva API KEY.

Te podría interesar, trazar una ruta de un punto a otro con Google Maps.

Creamos el mapa en JavaScript

Ahora vamos a nuestro codigo JavaScript y agregamos la función initMap que se llama en el script anterior.

let map; function initMap() const coords = lat: 20.5866641, lng: -100.3863976 ; map = new google.maps.Map(document.getElementById("map"), center: coords, zoom: 15, );

Esta función será el punto de partida de nuestro mapa.

Aquí definimos las coordenadas de la vista inicial y conectamos con el contenedor HTML del mapa.

Agregamos evento de Clic

Ya solamente nos falta el código relacionado con el clic del usuario.

Dentro de la función initMap después de conectar con el mapa colocamos lo siguiente.

let infoWindow = new google.maps.InfoWindow( content: "Clic en el mapa para ubicar la propiedad.", position: coords, ); infoWindow.open(map); map.addListener("click", (mapsMouseEvent) => infoWindow.close(); infoWindow = new google.maps.InfoWindow( position: mapsMouseEvent.latLng, ); $("#lat").val(mapsMouseEvent.latLng.lat()); $("#lon").val(mapsMouseEvent.latLng.lng()); $("#alt").val(15); infoWindow.setContent( "Ubicar propiedad aquí." ); infoWindow.open(map); );

Creamos una ventanita de información con la leyenda ‘Clic en el mapa para ubicar la propiedad’.

De esta forma el usuario sabrá lo que tiene que hacer sin problemas.

Agregamos el evento clic donde se abrirá una nueva ventanita de información y en ella podremos hacer lo que queramos con las coordenadas del nuevo punto.

¿Bastante fácil no es así? ¿Qué más se te ocurre que podriamos hacer ahora?

Si esta información sobre como obtener coordenadas de mapa al hacer clic te ha sido de utilidad no olvides compartirla en tus redes sociales favoritas y dejarnos un comentario en la sección de abajo si tienes cualquier duda relacionada con el tema de arriba, será un placer ayudarte.