1. ホーム
  2. jquery

[解決済み] Google Maps APIでマウスのスクロールホイールによる拡大縮小を無効にする方法

2022-03-17 17:40:43

質問

Google Maps API (v3) を使用して、ページ上にいくつかの地図を描いています。ひとつだけ、マウスホイールを地図の上でスクロールさせたときのズームを無効にしたいのですが、方法がわかりません。

scaleControlを無効にした(つまり、スケーリングUI要素を削除した)のですが、これではスクロールホイールのスケーリングを防ぐことができません。

以下は、私の機能の一部です(簡単なjQueryプラグインです)。

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};

解決方法は?

Maps API のバージョン 3 では、単純に scrollwheel オプションで false を指定します。 マップオプション プロパティを使用します。

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

Maps API のバージョン 2 を使用している場合は、Maps API のバージョン 2 を使用するために disableScrollWheelZoom() 以下のようなAPIコールがあります。

map.disableScrollWheelZoom();

scrollwheel Maps API のバージョン 3 ではズームはデフォルトで有効になっていますが、バージョン 2 では enableScrollWheelZoom() APIコールを使用します。