Google-map-react: Marker animations

Created on 11 Oct 2016 · 4Comments · Source: google-map-react/google-map-react

Hello,

is there an easy way to animate markers when loading the map for the first time ? Is it possible to use standard Google Maps Marker Animations when using own components as markers ?

For example, when creating markers you would usually do:

marker = new google.maps.Marker({
  map: map,
  animation: google.maps.Animation.DROP,
  position: { lat: 59.327, lng: 18.067 }
});

Thanks !

Source

VLNTNA

Most helpful comment

You can access the Google API by using onGoogleApiLoaded in the GoogleMap component:

<GoogleMap bootstrapURLKeys={{key: APIKEY}} onGoogleApiLoaded={this.initMap} />

Then you can write a method in your react componet:

initMap({map, maps}) {
    var marker = new maps.Marker({
        map: map,
        animation: maps.Animation.DROP,
        position: {lat: -27.63453, lng: 153.0387}
    })
}

The objects {map, maps} in the callback function gives you access to:
maps -> Animation, ControlPosition, MapTypeControlStyle, MapTypeId, ...
map -> qg {gm_bindings_: Object, __gm: rf, gm_accessors_: Object, streetViewControl: true…

peitalin on 11 Oct 2016

👍3

All 4 comments

You can access the Google API by using onGoogleApiLoaded in the GoogleMap component:

<GoogleMap bootstrapURLKeys={{key: APIKEY}} onGoogleApiLoaded={this.initMap} />

Then you can write a method in your react componet:

initMap({map, maps}) {
    var marker = new maps.Marker({
        map: map,
        animation: maps.Animation.DROP,
        position: {lat: -27.63453, lng: 153.0387}
    })
}

peitalin on 11 Oct 2016

👍3

source: https://github.com/istarkov/google-map-clustering-example
example: http://istarkov.github.io/google-map-clustering-example/