web-dev-qa-db-ja.com

Googleマップiframeでスクロールズームを無効にする

だから、明らかに私が使用するとき：

<iframe style="pointer-events:none;" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

パンも無効になります。

そして私が使用するとき：

<iframe style="scrollwheel: false" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

うまくいきません。

とにかく、iframeでスクロールズームを無効にするだけですか？

google-mapsiframe
16
Milad

Google Maps iframe APIでのみスクロールを無効にする方法はありませんが、回避策があります。

_style="pointer-events:none;"_がiframeがマウスイベントを受信するのを防ぐことに気づいたように、オーバーレイ上のJavascriptイベントハンドラーの組み合わせにより、必要なときにマウスイベントの受信を無効および有効にできます。

mousemove()をリッスンして、マウスが特定の領域（ボタンなど）にあるときにのみポインターイベントをリリースすることもできます。

クイックデモ on github を作成しました。

41
kaho

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

@kaho ideaから採用

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
AlbertSamuel

彼はonClick="style.pointerEvents='none'"でそれを実現する方法に関する優れたブログ投稿です 埋め込みGoogleマップiframeのマウススクロールホイールズームを無効にする

1
Jonny Jordan

ここに例があります

<script>
  function initMap() 
 {   
  var map = new google.maps.Map(document.getElementById('map'),    
  {center: {lat: -34.397, lng: 150.644},     
  scrollwheel: false,    
  zoom: 8
  });
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer>      
</script>

ソース：- https://developers.google.com/maps/documentation/javascript/?csw=1#GMap2.Methods

0
Pradeep