Animate camera paths

You can add camera paths animations to your 3D map to provide a more immersive experience for your users. Camera path animations can fly to or fly around a point on the map.

The following example combines the flyCameraTo and flyCameraAround animations:

Preset camera paths

3D Maps in Maps JavaScript provides two preset camera paths. The camera paths can be customized by changing the duration of the animation (thereby increasing or decreasing speed), or by combining them to create more cinematic experiences. Additionally, you can control the height of the camera by specifying the altitudeMode.

3D Maps in Maps JavaScript supports the following camera paths:

• flyCameraTo animation flies from the map center to a specified destination.
• flyCameraAround animation rotates around a point on the map the specified number of revolutions.

The two available paths may be combined to fly to a point of interest, rotate around it, and then stop when specified.

Fly to

The following code sample demonstrates animating the camera to fly to a location:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Fly around

The following code sample demonstrates animating the camera to fly around a location:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

Combine animations

The following code sample demonstrates combining animations to fly the camera to a location, and then rotate around the location when the first animation ends:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}