How can animation be added to markers in "react-google-maps"?

Question

The docs - https://github.com/tomchentw/react-google-maps/tree/v5.1.0#documentation - say that "animation" can be added to markers. However, I cannot seem to figure out how to add the animation. There are also other properties I tried to add, but I was not able to. Code snippet is posted below:

const ProvidenceMap = withGoogleMap(props => (
  <GoogleMap
    defaultZoom={13}
    defaultCenter={{ lat: 41.8240, lng: -71.4128 }}
  >

    {props.markers.map((marker, index) => (
      <Marker
        key={index}
        position={marker.position}
        onClick={() => props.onMarkerClick(marker)}
        animation={marker.animation}
      >

        {marker.showInfo && (
          <InfoWindow onCloseClick={() => props.onMarkerClose(marker)}>
            {
              <div className="info-window">this is the info window</div>
            }
          </InfoWindow>
        )}
      </Marker>
    ))};
  </GoogleMap>
));

class ContentContainer extends React.Component {
  constructor() {
    super();
    this.state = {
      landing: true,
      map: false,
      wishListTitle: "",
      markers: [
        {
          position: {lat: 41.8240, lng:-71.4128},
          showInfo: false,
          animation: "DROP",
        },
        {
          position: {lat: 41.8250, lng: -71.4338},
          showInfo: false,
          animation: "DROP",
        }
      ],
    }
  }
  /* click handlers and render() have been omitted for simplicity */
}

Answer 1

The part of the README that mentions the animation prop refers you to the official documentation for the google.maps.Marker class. That documentation gives the method signature for setAnimation as:

setAnimation(animation:Animation)

...which tells you that the type of the animation argument—and, presumably, the React animation prop—should be Animation. If you click on the link, it takes you to Animation constants, where you learn that two constants are defined on google.maps.Animation: BOUNCE and DROP.

That tells you that the value for this prop should be either google.maps.Animation.BOUNCE or google.maps.Animation.DROP. And so:

[
  {
    position: {lat: 41.8240, lng:-71.4128},
    showInfo: false,
    animation: google.maps.Animation.DROP,
  },
  {
    position: {lat: 41.8250, lng: -71.4338},
    showInfo: false,
    animation: google.maps.Animation.DROP,
  }
],

This matches what you can see in the react-google-maps examples, where other google.maps.* constants are used.

Answer 2

When using the 'google-maps-react' component from NPM, I was able to enable animations by adding this.props before google.maps.Animation.DROP on the marker tag. Specifically:

<Marker
  animation= {this.props.google.maps.Animation.DROP}
/>