Reverse animation for Google Map marker removal?

Question

I know I can animate the "adding" of a marker on a google map, a la https://developers.google.com/maps/documentation/javascript/overlays#MarkerAnimations

Is there anyway I can do the reverse animation for removing the marker from the map? I'd like it to fly back up to the top of the map on marker removal... is that possible?

Here's my remove code so far (just removes it from the map, no animation):

// TODO figure out if there is a way to animate this removal, like the add
$.contextualMap.prototype.removeMarker = function(m) {
  m.mapMarker.setMap(null);
  m.mapMarker = null;
};

Answer 1

As google.maps.Animation does not support reverse animation of droping, you need to write your own script for animating the marker.

You could write something like this:

function removeMarkerWithAnimation(map, marker){
    (function animationStep(){
        //Converting GPS to World Coordinates
        var newPosition = map.getProjection().fromLatLngToPoint(marker.getPosition());

        //Moving 10px to up
        newPosition.y -= 10 / (1 << map.getZoom()); 

        //Converting World Coordinates to GPS 
        newPosition = map.getProjection().fromPointToLatLng(newPosition);
        //updating maker's position
        marker.setPosition( newPosition );
        //Checking whether marker is out of bounds
        if( map.getBounds().getNorthEast().lat() < newPosition.lat() ){
            marker.setMap(null);
        }else{
            //Repeating animation step
            setTimeout(animationStep,10);
        }
    })();
}

Here is DEMO: