How to pan and zoom animated?

[VolteCoOfficial]

Hi! I want to pan and zoom on a marker when clicked but with an animation.
If I pan to latLng it will animate but not when I use zoom.

map.panTo({ lat: 0, lng: 0}); // will animate
map.setZoom(18); // Does not animate

If I call map.setZoom() immidiatelly after map.panTo() it will override the animation and just zooms straight to the point.

Example component

function TestComponnet() {
  const map = useMap();
  function onMarkerClick() {
    if (map && latitude && longitude) {
      map.panTo({ lat: latitude, lng: longitude });
      // map.setZoom(18); // uncomment and it will override panTo animation
    }
  }
  return (
    <AdvancedMarker onClick={onMarkerClick} position={{ lat: 0, lng: 0 }}>
      <Pin
        background={"#0f9d58"}
        borderColor={"#006425"}
        glyphColor={"#60d98f"}
      />
    </AdvancedMarker>
  );
}

[mrMetalWood]

One thing you could try is using the fitBounds method instead: https://developers.google.com/maps/documentation/javascript/reference/map#Map.fitBounds

Note: "Calling this method may cause a smooth animation as the map pans and zooms to fit the bounds. Whether or not this method animates depends on an internal heuristic"

So, there is no guaranty that will be an animation, but my guess would be that the api uses similar heuristics as when calling panTo and panBy. If its close enough it will animate, if its too far it will go there immediately.

I know its not quite the same and requires some rethinking of your mechanism to "zoom to a marker on click"

[usefulthink]

Below is a very basic implementation of such an animation using a custom hook.

Notes about this implementation:

• it only works on a vector-map (needs fractional zoom)
• it will block user-interactions until the animation finishes, so it should be quick
• I didn't think about edge-cases at all (e.g. unmounting the map while animation is running)

You can, of course, do a lot more with this basic technique, for example, use a library like GSAP or tween.js to do the interpolation instead of the simple geometric series approach here.

function useMapAnimation() {
  const map = useMap();

  const flyTo = useCallback(
    (toLatLng: google.maps.LatLngLiteral, toZoom: number) => {
      if (!map) return;

      requestAnimationFrame(function loop() {
        const {lat, lng} = map.getCenter()?.toJSON() || {lat: 0, lng: 0};
        const zoom = map.getZoom() || 0;

        // finish animation by setting final values
        if (
          Math.abs(toLatLng.lat - lat) < 0.000001 &&
          Math.abs(toLatLng.lng - lng) < 0.000001 &&
          Math.abs(toZoom - zoom) < 0.01
        ) {
          map.moveCamera({center: toLatLng, zoom: toZoom});
          return;
        }

        // schedule another animation frame
        requestAnimationFrame(loop);

        // move a certain percentage closer to destination with every frame, this both
        // controls the overall timing and adds a nice exponential easing
        map.moveCamera({
          center: {
            lat: lat + (toLatLng.lat - lat) * 0.1,
            lng: lng + (toLatLng.lng - lng) * 0.1
          },
          zoom: zoom + (toZoom - zoom) * 0.04
        });
      });
    },
    [map]
  );

  return {flyTo};
}


// usage example:

const MyMap = () => {
  const {flyTo} = useMapAnimation();

  const handleMapClick = useCallback(() => {
    flyTo({lat: 53.55, lng: 10.05}, 10);
  }, [flyTo]);

  return (
    <Map
      {...mapProps}
      onClick={handleMapClick}
    />
  );
};

[VolteCoOfficial]

That is really interesting. I will give it a try for sure and report back!

[VolteCoOfficial]

Well, it completelly froze my map :D

[usefulthink]

Add a console.log before the moveCamera call at the end. It could be that for whatever reason it's never close enough to the target, and so never stops updating the camera.

[usefulthink]

I first tried that on a map without fractional zoom where it didn't work, and that was the same symptom (if you set zoom to e.g. 13.3781, map.getZoom() will still just return 13, so the animation will never move closer)