Drag & drop an object into Google Maps from outside the map : marker not put at correct latitude / longitude

Question

I'd like to drag an object into my Google Map (API V3) from outside the map. After some research, I found this very helpful post and I tried to adapt it to my project.

The main idea is to drag a .png image on the map and when the mouse button is down, get the actual coordinates and place a marker at that lat / lng.

But I noticed there is a difference between the point you drag your image and the point where your marker is placed. The difference is around 10 / 15 pixels on the sample linked above, regardless the zoom level. At max zoom, it's not very important, but the more you unzoom, the more the gap is important.

Illustration of the gap :

• On my website, I'm trying to drag the green marker from outside the map to the South of Leman Lake, near to Geneva : (we are just BEFORE the mouse up, this is still my .png image)

• And when I mouse up, the "real" marker is put here :

(we are at 100 kms / 60 miles of the wanted place...)

So, why such a gap ? In the sample I linked above, the gap is less important, but it also exists. There are no error in my browser's console, and it doesn't seem to be a tricky CSS problem.
Do someone knows how to correct this problem ?

Thank you

Answer 1

The calculation of the marker-position is not exact.

1. the offset of the map also must be used inside the calculation(when the map is not placed at the top left corner of the page)
2. the anchor of the marker by default is the bottom-center , but the script simply takes the position provided via the event-argument, what may give different results, depending on the point inside the image where you grip it.

Fixed function:

$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e,ui) {
    var mOffset=$($map.getDiv()).offset();
    var point=new google.maps.Point(
        ui.offset.left-mOffset.left+(ui.helper.width()/2),
        ui.offset.top-mOffset.top+(ui.helper.height())
    );
    var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
    placeMarker(ll);
    }
});
});