Question

I have a marker in a google maps. I use this marker to retrieve the coordinate and update the lat and long in a form. When the user drops the marker I read the coordinates. My code is as follows:

    $wnd.marker = new google.maps.Marker(
            {
                map : $wnd.map,
                draggable : true,
                icon : "/gmapsMarker.png",
                iconShadow : "/gmapsMarkerShadow.png",
                position : defaultPosition,
                clickable : true
            });

    var toggleBounce = function(e) {
        var lat = $wnd.marker.position.lat();
        var lng = $wnd.marker.position.lng();
        update(lat,lng,false);
    }.bind(this);

    google.maps.event.addListener($wnd.marker, 'dragend', toggleBounce);

What is the problem?

Weirdly there is no problem in Internet Explorer 7,8 and 9.

In chrome and firefox I get some problems while I have the marker dragged. If I move the mouse too fast that the pointer gets outsie of the marker’s bounding box, the marker stucks. I need to release the mouse click, drag again de marker and drop it in my favourite position slowly.

Any recommendation?

I tried with the event “mouseup” with similar results.

Answer 1

This may help you

google.maps.event.addListener($wnd.marker, 'dragend', function() {
    // Get the Current position, where the pointer was dropped
    var point = $wnd.marker.getPosition();
    // Center the map at given point
    $wnd.map.panTo(point);
    // Update
    update(point.lat(), point.lng(),false);
});

You may like this (You can download the demo, only 8kb, direct download link).