Aprende a obtener las coordenadas de la ubicación donde el usuario hace clic en Google Maps con JavaScript.

Básicamente, todo lo que necesitas hacer para obtener las coordenadas de la ubicación donde los usuarios hacen clic en una instancia de Google Maps es adjuntar un detector de eventos al mapa en sí. Del evento recibido, extraiga la propiedad latLng que contiene un objeto con 2 métodos, estos 2 métodos son: latlngque devolverán los valores de latitud y longitud respectivamente:

// Agregar oyente de clics en el mapa
google.maps.event.addListener(map, "click", function (event) {
    var latLng = event.latLng;
    
    // por ejemplo, Latitud: 7.135742728253103, Longitud: -73.11638207013567
    alert("Latitude: " + latLng.lat() + ", Longitude: " + latLng.lng());
});

La siguiente implementación en un documento completo muestra cómo inicializar Google Maps y cómo adjuntar el oyente:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Google Maps Coordinates on Click</title>
        <style>
            /* Establezca siempre la altura del mapa explícitamente para definir el tamaño del div
            * elemento que contiene el mapa. */
            #map {
                width: 1200px;
                height: 800px;
                
            }
            /* Opcional: hace que la página de muestra llene la ventana. */
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <!-- Google Maps Container -->
        <div id="map"></div>

        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=YOUR_TOKEN&callback=initMap">
        </script>
        <script>
            var map;

            // Devolución de llamada ejecutada cuando se ha cargado el script de Google Maps
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: {
                        lat: 7.118389341039206, 
                        lng: -73.12187523419817
                    }
                });

                // Agregar oyente de clics en el mapa
                google.maps.event.addListener(map, "click", function (event) {
                    var latLng = event.latLng;
                    
                    alert("Latitude: " + latLng.lat() + ", Longitude: " + latLng.lng());
                });
            }
        </script>
    </body>
</html>

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores