Learn how to obtain the coordinates from the location where the user clicks 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 !


Senior Software Engineer at Software Medico. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Sponsors