How to get the latitude and longitude of Draggable pin for Google Maps

Estrada Web Group
Administrador
How to get the latitude and longitude of Draggable pin for Google Maps

How to get the latitude and longitude of Draggable pin for Google Maps

The Google Maps API offers a wide range of functions to interact with maps. You can statically set the markers (pins) programmatically, but you can also allow users to interact with the map by dragging the existing markers around the map.

Other post about google maps:

How to calculate the distance between two points in Google Maps with JavaScript?

Google Maps API V3

Fortunately, the Google API offers this very easy-to-use functionality. Below you will find an example based on Google Maps API V3. Basically, you have to receive the coordinates automatically when a user changes the position of a marker.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Find Latitude and Longitude of Draggable Marker Google Maps API</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API KEY"></script>
    <script type="text/javascript">
        function initialize() {
            // Creating map object
            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 12,
                center: new google.maps.LatLng(19.4326077, -99.13320799999997),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            // creates a draggable marker to the given coords
            var vMarker = new google.maps.Marker({
                position: new google.maps.LatLng(19.4326077, -99.13320799999997),
                draggable: true
            });

            // adds a listener to the marker
            // gets the coords when drag event ends
            // then updates the input with the new coords
            google.maps.event.addListener(vMarker, 'dragend', function (evt) {
                $("#txtLat").val(evt.latLng.lat().toFixed(6));
                $("#txtLng").val(evt.latLng.lng().toFixed(6));

                map.panTo(evt.latLng);
            });

            // centers the map on markers coords
            map.setCenter(vMarker.position);

            // adds the marker on the map
            vMarker.setMap(map);
        }
    </script>
</head>
<body onload="initialize();">
    <h2>
        Google Maps Draggable Marker Get Coordinates
    </h2>

    <label for="latitude">
        Latitude:
    </label>
    <input id="txtLat" type="text" style="color:red" value="19.4326077" />
    <label for="longitude">
        Longitude:
    </label>
    <input id="txtLng" type="text" style="color:red" value="-99.13320799999997" /><br />
    <br />
    <br />
    <div id="map_canvas" style="width: auto; height: 500px;">
    </div>

</body>
</html>

 

Compartir artículo:

Más artículos geniales

¿Cómo utilizar getters y setters para mejorar tus clases en JavaScript?

¿Cómo utilizar getters y setters para mejorar tus clases en JavaScript?

Los getters te permiten obtener el valor de una propiedad de un objeto, mientras que los setters te permiten establecer el valor de una propiedad de un objeto. Los getters y setters pueden usarse para validar la entrada de datos

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla