Menu
Is there a way to animate a marker on react-google-maps from another component outside the maps? My specific requirement is to be able to click on an item in a list that animates the marker on the map for two seconds. It would be good to not have to re-render the markers.
313
If you want to animate marker back-and-forth, just toggle setPosition each second. setTimeout(function() { var newPosition = /* select new position */ marker. setPosition(newPosition) }, 1000);
There is a method makeMarker() you just need to call from onMapReady() method . There is two method rotateMarker() and moveVechile() to rotate and move marker. Hope this will help you.
Go to the Google Cloud Platform Console. Now click on create a new project, and create a new project. 4. Now click on create credentials and save it. 5. Now just copy your API key and use it in your React Project. 1. Installation We’ve installed a third-party library react-google-map in our project. Now we are good at implementing maps. 2.
I prefer Mapbox over Google Maps for a few reasons, mainly that I find it more performant. The following examples will be using React and a third party NPM module, react-mapbox-gl. You can do all the same using vanilla JS and your view library of choice. Once we have our map set up and rending, we can create our animated marker.
Failed to load latest commit information. google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded.
Customization of markers. Now let’s start the integration process. Go to the Google Cloud Platform Console. Now click on create a new project, and create a new project. 4. Now click on create credentials and save it. 5. Now just copy your API key and use it in your React Project. 1. Installation
animation prop should be a number from 1 or 2.
1 is equal to window.google.maps.Animation.BOUNCE.
2 is equal to window.google.maps.Animation.DROP.
so to create a marker with animation it should be as following:
<Marker
position={position}
animation={window.google.maps.Animation.DROP}
/>
or
<Marker
position={position}
animation={2}
/>
And if you want to remove the BOUNCE animation use animation={null}.
You can start your app with marker state={ animation : 2 }(DROP animation) then change to state={ animation: 1 } using setState({ animation : 1 })(BOUNCE animation) and you can stop the BOUNCE animation using setState({ animation: null })
Check this Marker animation example on google maps docs
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
