How to add draggable markers to a Google Map using jQuery

Question

I'm playing with google Maps and I need some directions :-)

I'd like a map with a draggable marker. If the user drags the marker some formfields need to be updated with the coordinates of the marker.

Is there a jQuery-plugin that can do this using the v3 of the Google Maps API?

Answer 1

You dont need jquery, it won't make it any easier.

First create your map and add a draggable marker.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map, // handle of the map 
    draggable:true
});

Then you just need to add an event listener to the map that listens for the marker drag event and updates the textboxes.

google.maps.event.addListener(
    marker,
    'drag',
    function() {
        document.getElementById('lat').value = marker.position.lat();
        document.getElementById('lng').value = marker.position.lng();
    }
);

http://jsfiddle.net/xTh5U/