Closed flect-endo closed 2 years ago
Hi @flect-endo
You're right with custom markers you can probably use CSS transitions to animate your markers. Something like this:
<CustomMarker :options="{ position: markerPosition }" style="transition: all 0.5s">
<!-- your custom markup here -->
</CustomMarker>
For regular markers though we're going to have to implement some other strategy, perhaps like the ones you referenced or maybe even integrate some animation library like GSAP for better control over the animations.
@HusamIbrahim
Thank you for showing me how to do this. I think I can achieve what I want to do this way.
I tried this way.
It seems that google.maps.OverlayView#draw
method is called not only when the marker position changes, but also when the map bounds changes. In both cases, the transition seemed to take effect.
Therefore, some adjustments may be necessary.
Do you have any plans to add a
transition
option for theCustomMarker
?I want to move the marker position smoothly from its old location. As far as we know, the native
google.maps.Marker
does not do that.CustomMarker
use custom overlays and can handle HTML elements, so I think that css transitions can be used to smoothly move element positions.reference. https://stackoverflow.com/questions/5892113/extend-google-maps-marker-to-animate-smoothly-on-update