Google Maps APIでマウススクロールホイールのスケーリングを無効にする方法

560

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
};
jquery  google-maps  google-maps-api-3  jquery-plugins 
— アーロンラッセル
ソース
1
こんにちは私はあなたが素敵なボタンでマップをロックまたはロック解除できるようにするより開発されたプラグインを作成しました。jQueryプラグインもあります。github.com/diazemiliano/googlemaps-scrollpreventで確認できます。気に入っていただければ幸いです。
— EmilianoDíaz2016
17分09秒-18分25秒（2016-12-07）のJoel Spolsky（Stack OverflowのCEO兼共同創設者）が「未来を書く開発者」に特集しました。
— Peter Mortensen 2016

回答:

986

Maps APIのバージョン3ではscrollwheel、MapOptionsプロパティ内でオプションをfalseに設定するだけです。

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

Maps APIのバージョン2を使用している場合は、次のようにdisableScrollWheelZoom（） API呼び出しを使用する必要がありました。

map.disableScrollWheelZoom();

scrollwheelズームは、マップのAPIのバージョン3ではデフォルトで有効になっていますが、明示的に有効になっていない限り、バージョン2でそれが無効になっているenableScrollWheelZoom()APIコール。

— ダニエル・ヴァッサロ
ソース
40
+1 FYI：disableDefaultUI: true置き換え可能navigationControl: false, mapTypeControl: false, scaleControl: false
— ジョーダンアルセノ2013年
1
私にとっての難点は、mapTypeIdがない場合、他のパラメーターが無視されることでした。
— マイケルハンター
これは私には有効ですが、ページのモーダル内のスクロールホイールが無効になるという奇妙な副作用があります。モーダルコンテンツにマップはなく、カーソルはマップ上にありません。
— regularmike 2015年
悲しいことに、これはStreetViewPanoramaマップでは期待どおりに機能しません。スクロールホイールをfalseに設定すると、スクロールズームが無効になりますが、ページがスクロールを無効にします。
— ソロモンクロッソン2017
ダニエルは、この質問の答えに助けを私にしてくださいすることができます stackoverflow.com/questions/60544486/...
— ザビエルアイザック
103

ダニエルのコードは仕事をします（ヒープに感謝します！）。しかし、ズームを完全に無効にしたかったのです。そのためには、これらの4つのオプションすべてを使用する必要があることがわかりました。

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

参照：MapOptionsオブジェクトの仕様

— サイモン・イースト
ソース
2
これはまだ機能しますか？私は現在のバージョンのv3（3.9だと思います）でスクロールホイールを無視することができず、マップオブジェクトのすべての子をループしてマップへの伝達を停止する必要がありました。
— c.apolzon 2012年
うん、私のために働く、ありがとう！また、デフォルトのマップコントロールウィジェットをすべて削除する場合は、ズーム、回転、パンコントロールを個別にオフにするのではなく、disableDefaultUI：trueを実行します。
— thomax
33
大文字に注意してください。scrollwheelすべて小文字にする必要があります（Wを大文字にして私を見つけただけです）
— kez
1
— scrollwheel
30

これを動的に実行したい場合に備えて。

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

場合によっては、マップ上に「複雑な」何かを表示する必要があります（またはマップがレイアウトの小さな部分です）。このスクロールズームは真ん中に入りますが、きれいなマップができたら、この方法でズームできます。

— フェリペペレイラ
ソース
3
このコードは初期化時に追加できます。map.addListener（ 'click'、function（）{if（map）map.setOptions（{scrollwheel：true}）;}）; map.addListener（ 'mouseout'、function（）{if（map）map.setOptions（{scrollwheel：false}）;}）;
— スペースマン2015
これは、Googleマップコードの外でマップのスクロールホイール機能を調べたかったので、うまくいきました。つまり、自分のjqueryコード内から。
— lharby 16
26

複雑にしないでおく！元のGoogleマップ変数。余分なものはありません。

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}
— Creatif_IV
ソース
10

現在（2017年10月）、Googleはと呼ばれるズーム/スクロールを処理する特定のプロパティを実装しましたgestureHandling。その目的はモバイルデバイスの操作を処理することですが、デスクトップブラウザーの動作も変更します。これは公式ドキュメントからです：

function initMap() {
  var locationRio = {lat: -22.915, lng: -43.197};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: locationRio,
    gestureHandling: 'none'
});

GestureHandlingに使用できる値は次のとおりです。

  • 'greedy'：ユーザーが画面をスワイプ（ドラッグ）すると、マップは常にパン（上または下、左または右）します。つまり、1本指でのスワイプと2本指でのスワイプの両方でマップがパンします。
  • 'cooperative'：ユーザーは、ページをスクロールするには1本の指で、地図をパンするには2本の指でスワイプする必要があります。ユーザーが1本の指でマップをスワイプすると、オーバーレイがマップ上に表示され、2本の指を使用してマップを移動するように促すプロンプトが表示されます。デスクトップアプリケーションでは、ユーザーは修飾キー（Ctrlキーまたは）。キー）を押しながらスクロールすることにより、マップをズームまたは画面移動できます。
  • 'none'：このオプションは、モバイルデバイスのマップでのパンとピンチ、およびデスクトップデバイスでのマップのドラッグを無効にします。
  • 'auto'（デフォルト）：ページがスクロール可能かどうかに応じて、Google Maps JavaScript APIはジェスチャーハンドリングプロパティを'cooperative'またはに設定します'greedy'

つまり、設定を「常にズーム可能」（'greedy'）、「ズーム不可」（'none'）、または「ユーザーがCRTL /⌘を押してズームを有効にする必要があります」（）に簡単に強制できます'cooperative'。

— カルマ
ソース
7

素敵なボタンで地図をロックまたはロック解除できる、より開発されたjQueryプラグインを作成しました。

このプラグインは、透明なオーバーレイdivを使用してGoogle Maps iframeを無効にし、unlockitのボタンを追加します。ロックを解除するには、650ミリ秒間押す必要があります。

便宜上、すべてのオプションを変更できます。https://github.com/diazemiliano/googlemaps-scrollpreventで確認してください

ここにいくつかの例があります。

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);
.embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>
スニペットを展開

— エミリアーノ・ディアス
ソース
素敵なプラグインですが、iframeを使用する代わりにJS APIを使用してgoogleマップを作成する場合の使用方法は？
— ikkez
2
「Edit in JSFiddle Result JavaScript HTML CSS」は本当にコードの一部ですか？
— Peter Mortensen 2016
6

私の場合、重要なのは'scrollwheel':falseinit に設定することでした。注意：を使用していjQuery UI Mapます。以下は私のCoffeeScript init関数の見出しです。

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
— Andilabs
ソース
6

万が一、GMaps.jsライブラリを使用しているため、ジオコーディングやカスタムピンなどを簡単に実行できます。ここでは、前の回答から学んだ手法を使用してこの問題を解決する方法を示します。

var Gmap = new GMaps({
  div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
  lat: 51.044308,
  lng: -114.0630914,
  zoom: 15
});

// To access the Native Google Maps object use the .map property
if(Gmap.map) {
  // Disabling mouse wheel scroll zooming
  Gmap.map.setOptions({ scrollwheel: false });
}
— racl101
ソース
4

Javascript Google Map APIを無効にする方法を知りたい人のために

マップを1回クリックすると、ズームスクロールが有効になります。そして、無効にマウスの後のdivを終了します。

ここにいくつかの例があります 

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element , {
    zoom: 17,
    scrollwheel: false,
    center: {
      lat: parseFloat(-33.915916),
      lng: parseFloat(151.147159)
    },
  });
}


//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>
スニペットを展開

— アルバートサミュエル
ソース
3

簡単な解決策：

// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
  $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
  $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
.scrolloff{ pointer-events: none; }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>
スニペットを展開

ソース：https : //github.com/Corsidia/scrolloff

— ダーメ
ソース
2

誰かがこのための純粋なCSSソリューションに興味がある場合に備えて。次のコードは、マップ上に透明なdivをオーバーレイし、クリックされると、マップの後ろに透明なdivを移動します。オーバーレイはズームを防ぎ、クリックするとマップの背後でズームが有効になります。

私のブログの記事を参照してくださいGoogleはCSSでトグルズームをマッピングし、それがどのように動作するかの説明のために、ペンcodepen.io/daveybrown/pen/yVryMr作業のデモのために。

免責事項：これは主に学習を目的としたものであり、おそらく本番Webサイトには最適なソリューションではありません。

HTML： 

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

CSS：

.map-wrap {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin-bottom: 10px;
}

#map-input {
    opacity: 0;
}

.map-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 2;    
}

#map-input[type=checkbox]:checked ~ iframe {
    z-index: 3;
}

#map-input[type=checkbox]:checked ~ .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}
— デイビー
ソース
0

そのコードを使用して、Googleマップのすべての色とズームコントロールを提供します。（scaleControl：falseおよびscrollwheel：falseは、マウスホイールが拡大または縮小されないようにします）

function initMap() {
            // Styles a map in night mode.
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 23.684994, lng: 90.356331},
                zoom: 8,
                scaleControl: false,
                scrollwheel: false,
              styles: [
                {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
                {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
                {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
                {
                  featureType: 'administrative.locality',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'geometry',
                  stylers: [{color: '#263c3f'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry.stroke',
                  stylers: [{color: '#212a37'}]
                },
                {
                  featureType: 'road',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry',
                  stylers: [{color: '#746855'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry.stroke',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'labels.text.fill',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'transit',
                  elementType: 'geometry',
                  stylers: [{color: '#2f3948'}]
                },
                {
                  featureType: 'transit.station',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b3'}]
                },
                {
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#0676b6'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#515c6d'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.stroke',
                  stylers: [{color: '#17263c'}]
                }
              ]
            });
    
             var marker = new google.maps.Marker({
              position: {lat: 23.684994, lng: 90.356331},
              map: map,
              title: 'BANGLADESH'
            });
          }
スニペットを展開

— チャモンロイ
ソース
このコードは質問に答えることがありますが、問題を解決する方法や理由に関する追加のコンテキストを提供すると、回答の長期的な価値が向上します。質の高い回答を提供するには、この回答方法をお読みください。
— 2017年
0

私はこの簡単な試験でそれを行います

jQuery

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

CSS

.map {
    width: 100%; 
}
.map iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
    pointer-events: auto;
}

または、gmapオプションを使用します

function init() { 
    var mapOptions = {  
        scrollwheel: false,
— ディミター
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.