Obtener coordenadas de Mapa al hacer click – Google Maps

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.

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

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.

¡Hasta luego!