ズームとパンの制御

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

概要

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

デフォルトの動作

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

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

TypeScript

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

JavaScript

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

操作処理の制御

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

gestureHandling: cooperative

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

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

TypeScript

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

JavaScript

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

サンプルを表示

gestureHandling: auto

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

<iframe> 内に含まれる地図 動作
あり cooperative
なし greedy

gestureHandling: greedy

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

gestureHandling: none

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

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

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

TypeScript

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

JavaScript

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

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

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

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

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

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