google maps draggable marker get coordinates

Keywords | google maps draggable marker get coordinates, google maps drag marker get coordinates, google maps marker draggable get position

Google Maps Draggable Marker

A marker identifies a location on a map. By default, a marker uses a standard image. You can allow users to move a marker on the map by setting the marker’s draggable property to true

Make a marker draggable

To allow users to drag a marker to a different location on the map, set draggable to true in the marker options.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

Google Maps Draggable Marker Get Coordinates

The following google maps javascript API example will demonstrate you how to use google maps drag marker get coordinates. Let’s create a Google map with a draggable marker and when you drag the marker lets generate the Latitude and Longitude of that location where you place the marker. Find the below source code:-

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Drag Marker Get Coordinates</title>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY"></script>

    <script type="text/javascript">
        function initialize() {
            // Creating map object2
            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 12,
                center: new google.maps.LatLng(28.47399, 77.026489),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            // creates a draggable marker to the given coords
            var vMarker = new google.maps.Marker({
                position: new google.maps.LatLng(28.47399, 77.026489),
                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="28.47399" />
    <label for="longitude">
        Longitude:
    </label>
    <input id="txtLng" type="text" style="color:red" value="77.026489" /><br />
    <br />
    <br />
    <div id="map_canvas" style="width: auto; height: 400px;">
    </div>
</body>
</html>

Download Code

What do you think?

I hope you liked this article on google maps draggable marker get coordinates. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

LEAVE A REPLY

Please enter your comment!
Please enter your name here