カメラパスをアニメーション化する

プラットフォームを選択: Android iOS JavaScript

カメラパスのアニメーションを 3D マップに追加して、ユーザーに没入感のあるエクスペリエンスを提供できます。カメラパスのアニメーションは、地図上の 1 点に飛んだり、その地点の周りを飛んだりできます。

次の例では、flyCameraTo アニメーションと flyCameraAround アニメーションを組み合わせています。

プリセットのカメラパス

Maps JavaScript の 3D Maps ではプリセットのカメラパスを利用できます。カメラパスは、アニメーションの持続時間を変更（速度を増減）したり、パスを組み合わせたりすることでカスタマイズし、より映画的な体験を創出できます。 また、altitudeMode を指定してカメラの高さを制御することもできます。

Maps JavaScript の 3D Maps は、次のカメラパスに対応しています。

• flyCameraTo アニメーションは、地図の中心から指定した場所まで飛びます。
• flyCameraAround アニメーションは、指定した回転数だけ地図上の 1 点を中心に回転します。

利用可能なこの 2 つのパスを組み合わせて、地図上の特定地点に飛んだり、その地点を中心に回転したりして、指定したタイミングで止まることができます。

ジャンプ

次のコードサンプルは、カメラをアニメーションで移動して特定の場所に飛ぶ方法を示しています。

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
  });
}

周りを飛ぶ

次のコードサンプルは、カメラをアニメーションで移動して特定の場所の周りを飛ぶ方法を示しています。

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

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

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

アニメーションを組み合わせる

次のコードサンプルは、アニメーションを組み合わせてカメラを特定の場所に飛ばし、最初のアニメーションが終了したらその場所の周りを回転させる方法を示しています。

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});
}