Google Maps APIを使用してクリックするとスクロールホイールのズームを有効にします

Question

私はGoogle Maps APIを使用しています。スクロールホイールを使用してウェブページをスクロールするときにモバイルデバイス上で地図をスクロールできます。ここで

は私のコードです：

var mapOptions = { 
    center: new google.maps.LatLng(51.605139, -2.918567), 
    zoom: 15, 
    scrollwheel: false, 
    draggable: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

これは素晴らしいですが、私が達成したいことはマップがをクリックしたときにのみ、ズームスクロールホイールを有効にあります。

（だから、Webページ上で、私はマップをクリックしたときに、私はそれにズームすることができ、またはモバイルデバイス、私は上の画面をタップすると、その後、私はピンチすることができ、ズーム/周辺の地図をドラッグします。）

イベントリスナーを追加してダブルクリックまたはシングルクリックでのみドラッグ可能にすることはできますか？
APIを使用することはできますか？

---

私は、次のコードを試してみましたが、動作していないようEDIT

：

google.maps.event.addListener(map, 'click', function (event) { 
    var mapOptions = { 
    draggable: true, 

    }; 
}); 

Answer 1

これは動作するはずです：

 google.maps.event.addListener(map, 'click', function(event){ 
      this.setOptions({scrollwheel:true}); 
     }); 

Answer 2

google.maps.event.addListener(map, 'mouseout', function(event){ 
this.setOptions({scrollwheel:false}); 
}); 

このDr.Molleの答えに加えて、ちょっとした配慮が必要です。

これが表示されているのと同じように、マウスを地図から離したときにスクロールホイールのズームを再び無効にします。

Answer 3

私は解決策を見つけ、読み込み時にスクロールを無効にし、クリック時にスクロールズームを有効にするための完全なコードを集めました。

負荷に無効にスクロール：スクロールホイール：偽、 は、地図上のイベントをクリックして、スクロールホイールを有効にするために聞く：真、

map.addListener('click', function() { 
    map.set('scrollwheel', true); 
}); 

私のブログにコードを見つけてください：http://anasthecoder.blogspot.ae/

Answer 4

は、これは何私であります一般的に実行します。

ユーザーは、マップ（マウスダウン）と対話 - >設定ズーム可能な
マウスが上に載っています1秒以上のマップ - >設定ズーム可能な
マウスは、マップの外に出る -

>設定ズーム可能ではない。これは、通常行われる作業を取得します。ユーザーがページをスクロールすることを考えている場合は、マップが続きます。 ユーザーがズームイン/アウトしたいときには、ユーザーはそれと対話したり、しばらくポインターを置いたりする必要があります。

ソースコード：

google.maps.event.addListener(map, 'mousedown', function(event){ 
    this.setOptions({scrollwheel:true}); 
    }); 
    google.maps.event.addListener(map, 'mouseover', function(event){ 
    self = this; 
    timer = setTimeout(function() { 
     self.setOptions({scrollwheel:true}); 
    }, 1000); 
    }); 
    google.maps.event.addListener(map, 'mouseout', function(event){ 
    this.setOptions({scrollwheel:false}); 
    clearTimeout(timer); 
    }); 

Answer 5

これが私の例であり、それは私のために動作します。ページが読み込まれると、Googleマップ（ホイールスクロール）がオフになり、地図をクリックすると（ホイールスクロール）、オンになります。スクロールホイールの値がfalseのようになりますtrueの場合&、それは本当でしょう偽の場合

var map = new google.maps.Map(document.getElementById('map-id'), { 
      scrollwheel: false, 
     }); 
     google.maps.event.addListener(map, 'mouseout', function(){ 
      this.setOptions({scrollwheel:false}); 
     }); 
     map.addListener('click', function() { 
      map.set('scrollwheel', true); 
     }); 

Answer 6

これは、マップをクリックするだけで、マップを設定します。

function initMap() { 

     var florida = { 
     lat: 27.5814346, 
     lng: -81.0534459 
     }; 

     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 6, 
     center: florida, 
     scrollwheel: false 
     }); 


     google.maps.event.addListener(map, 'click', function(event) { 
     if (this.scrollwheel == false) { 
      this.setOptions({ 
      scrollwheel: true 
      }); 
     } else { 
      this.setOptions({ 
      scrollwheel: false 
      }); 
     } 
     }); 

    }