3D 地図の操作と探索

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

コントロールの概要

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 のコントロールの一覧は次のとおりです。

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

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

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

プリセットのカメラパス

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

次のステップ