概要
ウェブページで地図を使用する場合、ユーザーによるズーム操作やパン操作を制御するオプションが必要な場合があります。こうしたオプション(gestureHandling
、minZoom
、maxZoom
、restriction
など)は、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
オプションがない地図は、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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
以下の地図は、上記のコードの 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, }, }, });
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, }, }, });