How to determine the current coordinates of a click of the user in a specific location on Google Maps with JavaScript

Basically, all that you need to do in order to obtain the coordinates of the location where the users clicks on an instance of Google Maps, is to attach an event listener to the map itself. From the received event, extract the latLng property that contains an object with 2 methods, these 2 methods are: lat and lng that will returns the latitude and longitude values respectively:

// Add click listener on the map
google.maps.event.addListener(map, "click", function (event) {
    var latLng = event.latLng;
    
    // e.g Latitude: 7.135742728253103, Longitude: -73.11638207013567
    alert("Latitude: " + latLng.lat() + ", Longitude: " + latLng.lng());
});

The following implementation in a full document shows how to initialize Google Maps and how to attach the listener:

<!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>
            /* Always set the map height explicitly to define the size of the div
            * element that contains the map. */
            #map {
                width: 1200px;
                height: 800px;
                
            }
            /* Optional: Makes the sample page fill the window. */
            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;

            // Callaback executed when Google Maps script has been loaded
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: {
                        lat: 7.118389341039206, 
                        lng: -73.12187523419817
                    }
                });

                // Add click listener on the map
                google.maps.event.addListener(map, "click", function (event) {
                    var latLng = event.latLng;
                    
                    alert("Latitude: " + latLng.lat() + ", Longitude: " + latLng.lng());
                });
            }
        </script>
    </body>
</html>

Happy coding !

This could interest you

Become a more social person