I know I can animate the "adding" of a marker on a google map, a la

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

I know I can animate the "adding" of a marker on a google map, a la https://developers.google./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;
};

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers

• Doesn't seem to be possible via the standard google.maps.Animation class, as there are only 2 supported animations (BOUNCE and DROP). You will probabl have to make your own animation using normal javascript and moving the marker on the map.... Don't forget to switch off the shadow or handle it specially... – Tomas Commented Apr 16, 2012 at 17:39

2 Answers 2

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:

My idea:

1. create an animated GIF of a flying marker pin, which then fades away.
2. on the marker delete event, swap icon to show the GIF
3. Since you created the GIF, you should know the animation time length. Then, setTimeout with this value to call setMap(null)

It might be preventing event propagation, which is one of many possible drawbacks.