ズームとパンの制御

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

概要

ウェブページで地図を使用する場合、ユーザーによるズーム操作やパン操作を制御するオプションが必要な場合があります。こうしたオプション（gestureHandling、minZoom、maxZoom、restriction など）は、MapOptions インターフェース内で定義します。

デフォルトの動作

次の例は、zoom オプションと center オプションのみを定義してインスタンス化された地図をユーザーが操作した場合の、デフォルトの動作を示しています。

この地図のコードは以下のとおりです。

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

操作処理の制御

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

gestureHandling: cooperative

以下の地図では、gestureHandling オプションを cooperative に設定しています。これにより、ユーザーがページをスクロールしても、地図がズームまたはパンされることはありません。ユーザーはズーム コントロールをクリックして、地図をズームできます。タッチスクリーン デバイスの場合は、2 本指を使う操作で地図のズームやパンを行うこともできます。

この地図のコードは以下のとおりです。

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

サンプルを表示

gestureHandling: auto

ページ上部の gestureHandling オプションがない地図は、gestureHandling が cooperative に設定された前の地図と動作は同じです。これは、このページ上のすべての地図が <iframe> 内にあるためです。gestureHandling の値がデフォルトの auto である場合、<iframe> で地図が埋め込まれているかどうかに応じて、greedy または cooperative に切り替わります。

<iframe> で埋め込まれた地図 動作
あり cooperative
なし greedy

gestureHandling: greedy

gestureHandling を greedy に設定した地図は次のとおりです。この地図は、cooperative とは異なり、すべてのタッチ操作とスクロール イベントに反応します。

gestureHandling: none

gestureHandling オプションを none に設定して、地図操作を無効にすることもできます。

パンとズームを無効にする

地図のズームとパンを完全に無効にするには、gestureHandling と zoomControl の 2 つのオプションを含める必要があります。

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

以下の地図は、上記のコードの gestureHandling と zoomControl を組み合わせています。

地図の境界とズームを制限する

操作やズームのコントロールを許可する一方で、地図を特定の境界に制限したり、ズームの最小値や最大値を設定したりすることもできます。その場合は、restriction、minZoom、maxZoom オプションを設定します。次のコードと地図では、これらのオプションを使用しています。

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.js