地図とカメラを操作する

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

カメラのパンや最大高度をコントロールするか、特定の地図内でのユーザーの移動を制限する緯度 / 経度の境界を作成することをおすすめします。これには、カメラの制限を使用します。

次の例は、カメラの移動を制限するように位置境界が設定された地図を示しています。

地図の境界を制限する

bounds オプションを設定することで、カメラの地理的境界を制限できます。

次のコードサンプルは、地図の境界を制限する方法を示しています。

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

カメラを制限する

次のいずれかのオプションを設定して、カメラの動きを制限できます。

  • maxAltitude
  • minAltitude
  • maxHeading
  • minHeading
  • maxTilt
  • minTilt

次のコードサンプルは、カメラを制限する方法を示しています。

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

地図とカメラの境界を制限する

地図とカメラの両方の境界を同時に制限できます。次のコードサンプルは、地図とカメラの両方の境界を制限する方法を示しています。

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

プリセットのカメラパス

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

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

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

ジェスチャー処理を制御する

地図を含むページをユーザーがスクロールすると、そのスクロール操作によって地図が意図せずズームされることがあります。この動作は、gestureHandling 地図オプションを設定することで制御できます。

gestureHandling: cooperative

「協調」ジェスチャー処理では、地図のズームやパンに影響を与えることなく、ページをスクロールできます。ズームするには、コントロール、2 本指のジェスチャー（タッチスクリーン デバイスの場合）、または CMD/CTRL を押しながらスクロールします。

次のコードは、ジェスチャー処理を「協調的」に設定する方法を示しています。

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

「Greedy」ジェスチャー処理は、すべてのスクロール イベントとタッチ操作に反応します。

gestureHandling: auto

「自動」ジェスチャー処理では、地図が <iframe> に含まれているかどうか、ページがスクロール可能かどうかによって、地図の動作が変わります。

  • マップが <iframe> 内にある場合、ジェスチャー処理は「協調的」になります。
  • 地図が <iframe> 内にない場合、ジェスチャー処理は「greedy」になります。