Отключить прокрутку масштабирования в google maps 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?

Ответ 1

Невозможно отключить прокрутку только в API iframe Google Maps, но есть работа.

Как вы заметили, style="pointer-events:none;" не позволяет iframe получать какое-либо событие мыши и с комбинацией обработчиков событий Javascript на оверлее, вы можете отключить и активировать получение события мыши в то время, которое вы хотите.

Вы даже можете прослушать mousemove() и только отпустить события указателя, когда мышь находится в определенных областях (например, кнопки)

Я сделал быстрое демо на github, надеюсь эта помощь.

Ответ 2

Для кого-то, кто задается вопросом, как отключить API Google Карт Google

Принято из идеи @kaho

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

Он хороший пост в блоге с тем, как достичь этого с помощью onClick="style.pointerEvents='none'" Отключить масштабирование колесика мыши с помощью встроенных фреймов Google Map

Ответ 4

Вот пример

<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

Ответ 5

Я сделал снимок экрана на веб-сайте, затем отредактировал снимок экрана в фотошопе, чтобы он стал изображением, гораздо проще и справился со своей работой. Вот страница с картой и без прокрутки, https://www.yanchdey.com/контакт/