Removing Google Maps V3 marker drag and drop animation?

Question

When I drag the handle, it rises a little, and an X warp appears beneath it to indicate the position of the drag.

Is there any need to completely get rid of this? I have custom handles and you want to display their drag status in another way.

Answer 1

I do not think this is possible. You can change the marker to dragstart / dragend, but that will not change the "x" that appears at the bottom.

Here is an example of a marker change when dragging:

http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-imagechange.html

When you look at the images, you will see that the "x" is not part of png.

Answer 2

You can set the marker property raiseOnDrag to false

var marker = new google.maps.Marker({ draggable: true, map: map, raiseOnDrag: false }); 

And then you can use the ScottE solution to create a custom drag and drop effect.

Answer 3

raiseOnDrag undocumented in the current version of the API (3.17). Instead, there is a crossOnDrag property:

crossOnDrag : boolean - If false, disables the cross that appears below the handle when dragging. By default, this parameter is true.

https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

---

Edit (September 2016): raiseOnDrag is still undocumented in 3.25

Answer 4

You also need to switch the original image to the drag event again.

The full code is as follows:

 myArrow = new google.maps.MarkerImage("defaultIcon.png"); myArrowDrag = new google.maps.MarkerImage("draggingIcon.png"); myMarker = new google.maps.Marker({ position : new google.maps.LatLng(myLat, myLng), map : map, icon : myArrow, draggable : true, raiseOnDrag : false }); google.maps.event.addListener(myMarker, 'dragstart', function() { myMarker.setOptions({icon: myArrowDrag}); }); google.maps.event.addListener(myMarker, 'dragend', function() { myMarker.setOptions({icon: myArrow}); });