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,
    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>
    <title>Google Maps Drag Marker Get Coordinates</title>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript" src=""></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) {


            // 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="28.47399" />
    <label for="longitude">
    <input id="txtLng" type="text" style="color:red" value="77.026489" /><br />
    <br />
    <br />
    <div id="map_canvas" style="width: auto; height: 400px;">

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.


Please enter your comment!
Please enter your name here