css transition support for CustomMarker

[flect-endo]

Do you have any plans to add a transition option for the CustomMarker?

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

[HusamElbashir]

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.

[flect-endo]

@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.