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

Estrada Web Group
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>

    <meta name="viewport" content="width=device-width" />
    <title>Find Latitude and Longitude of Draggable Marker Google Maps API</title>
    <script src=""
    <script type="text/javascript" src=" 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) {


            // centers the map on markers coords

            // adds the marker on the map
<body onload="initialize();">
        Google Maps Draggable Marker Get Coordinates

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



Compartir artículo:

Más artículos geniales

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