3D 地図の操作と探索

コントロールの概要

Maps JavaScript API の Photorealistic 3D Maps によって表示される地図には、ユーザーが地図を操作できる UI 要素が含まれています。こうした要素はコントロールと呼ばれます。UI に含めるかどうかは任意です。UI コントロールを抑制しても、ユーザーはキーボード ショートカットを使用して地図内を移動できます。

Maps JavaScript API の Photorealistic 3D Maps は、プリセットのカメラパスを使用してユーザーを地図上で誘導することもできます。これらのパスはカスタマイズして組み合わせることで、豊かな 3D エクスペリエンスを作成できます。

探索コントロール

次の画像は、Maps JavaScript API の Photorealistic 3D Maps によって表示されるデフォルトのコントロール セットを示しています。

Maps JavaScript の Photorealistic 3D Maps のコントロールの一覧は次のとおりです。

• ズーム コントロールには、地図のズームレベルを変更する [+] ボタンと [-] ボタンが表示されます。
• 傾斜コントロールを利用すると、カメラの傾斜を変更できるようになります。
• 回転コントロールを使用すると、カメラの向きを変更できるようになります。
• 移動コントロールを使用すると、「←」、「→」、「↑」、「↓」ボタンが表示され、地図の中心点を変更できるようになります。

次のコードサンプルは、データ探索コントロールの切り替えを示しています。

プリセットのカメラパス

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

Maps JavaScript の Photorealistic 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 },
      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,
    rounds: 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-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

次のステップ

• 詳しくは、地図とカメラを制限する方法をご覧ください。
• ユーザー操作をリッスンして処理する方法を学習する。