Drag and Drop Google Maps Marker

I have made a drag-and-drop feature so that users can drag an icon from the sidebar and when they drop the icon, a marker is placed.

The below implementation seemed like the best (only) way to achieve it, but issues are occurring when the network is slow, presumably because the lat/lng from the mouseover event is (very) inaccurate.

Can anyone offer an alternative way I could do this? Perhaps placing the marker immediately and then using the built-in maps drag-n-drop ?

function placeMarker(lat, lng) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), draggable: true, map: map }); return marker; } $(".icon").draggable({helper: 'clone', start: function(e, ui) { map.setOptions({draggable: false}); $("#map").css('cursor', 'crosshair'); }, stop: function(e,ui) { map.setOptions({draggable: true}); $("#map").css('cursor', 'default'); google.maps.event.addListenerOnce(map, "mouseover", function(event) { var lat = event.latLng.lat(), lng = event.latLng.lng(), id = ui.helper.context.id; pointA = id === "pointA" && pointA === true ? pointA.setMap(null) : placeMarker(lat, lng); pointB = id === "pointB" && pointB === true ? pointB.setMap(null) : placeMarker(lat, lng); }); } });