Removing The Google Maps V3 Marker Drag Animation?

When I drag and drop a marker it raises a little bit and a skewed X appears underneath it to denote dragging position. Is there anyway to get rid of this completely? I have custom

Solution 1:

You can set the property of the marker raiseOnDrag to false

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

And then you could use ScottE solution to create a custom drag effect.

Solution 2:

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

crossOnDrag : boolean - If false, disables cross that appears beneath the marker when dragging. This option is true by default.

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

---

Edit (Sep. 2016): raiseOnDrag is still undocumented in 3.25

Solution 3:

I don't believe this is possible. You can change the marker on dragstart / dragend, but this doesn't change the 'x' that shows up underneath.

Here is an example of changing the marker when dragging:

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

When you look at the images you'll see that the 'x' is not part of the png.

Solution 4:

You also need to then switch the original image back on dragend event.

complete code is like this:

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});
});