Disable mouse scroll wheel zoom on embedded Google

2019-01-03 11:25发布

I am working on a WordPress site where the authors usually embed Google Maps using iFrames in most posts.

Is there a way to disable the zoom via mouse scroll wheel on all of them using Javascript?

30条回答
ゆ 、 Hurt°
2楼-- · 2019-01-03 12:10

I`ve created a very simple jQuery plugin to resolve the problem. Check it at https://diazemiliano.github.io/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);
Edit in JSFiddle Result JavaScript HTML CSS .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>

查看更多
趁早两清
3楼-- · 2019-01-03 12:10

I stumbled upon this issue myself and used some of a mashup of two very useful answers on this question: czerasz's answer and massa's answer.

They both have a lot of truth, but somewhere in my tests, I found out that one didn't work for mobile and had poor IE support (only works on IE11). This is the solution by nathanielperales, then extended by czerasz, which relies on pointer-events css and that doesn't work on mobile (there is no pointer in mobile) and it doesn't work on any version of IE that is not v11. Normally I wouldn't care less, but there are a ton of users out there and we want consistent functionality, so I went with the overlay solution, using a wrapper to make it easier to code.

So, my markup looks like this:

<div class="map embed-container">
  <div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
  <div class="map-overlay" style="display: block;"></div>
  <iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe>
</div>

Then the styles are like this:

.map.embed-container {
  position:relative;
}

.map.embed-container #map-notice{
  position:absolute;
  right:0;
  top:0;
  background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/
  background-color: rgba(0,0,0,.50);
  color: #ccc;
  padding: 8px;
}
.map.embed-container .map-overlay{
  height:100%;
  width:100%;
  position:absolute;
  z-index:9999;
  background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/
}

Lastly the script:

//using jquery...
var onMapMouseleaveHandler = function (event) {
  $('#map-notice').fadeIn(500);
  var elemento = $$(this);
  elemento.on('click', onMapClickHandler);
  elemento.off('mouseleave', onMapMouseleaveHandler);
  $('.map-overlay').fadeIn(500);
}

var onMapClickHandler = function (event) {
  $('#map-notice').fadeOut(500);
  var elemento = $$(this);
  elemento.off('click', onMapClickHandler);
  $('.map-overlay').fadeOut(500);
  elemento.on('mouseleave', onMapMouseleaveHandler);
}
$('.map.embed-container').on('click', onMapClickHandler);

I also added my tested solution in a GitHub gist, if you like to get stuff from there...

查看更多
Lonely孤独者°
4楼-- · 2019-01-03 12:10

I was having the same problem: when scrolling the page then the pointer becomes over the map, it starts to zoom in/out the map instead of continuing scrolling the page. :(

So I solved this putting a div with an .overlay exactly before each gmap iframe insertion, see:

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

In my CSS i created the class:

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!

I hope get helped you :)

查看更多
地球回转人心会变
5楼-- · 2019-01-03 12:11

Here is my solution for the problem, I was building a WP site, so there is a little php code here. But the key is scrollwheel: false, in the map object.

function initMap() {
        var uluru = {lat: <?php echo $latitude; ?>, lng: <?php echo $Longitude; ?>};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            scrollwheel: false,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }

Hope this will help. Cheers

查看更多
男人必须洒脱
6楼-- · 2019-01-03 12:12

Here is my simple solution.

Put your iframe in a div with a class called "maps" for example.

This will be the CSS for your iframe

.maps iframe { pointer-events: none }

And here is a little javascript that will set the pointer-events property of the iframe to "auto" when you hover the div element for at least 1 second (works best for me - set it to whatever you like) and clears the timeout/set it to "none" again when the mouse leaves the element.

var maptimer;

$(".maps").hover(function(){
    maptimer = setTimeout(function(){
        $(".maps").find("iframe").css("pointer-events", "auto");
    },1000);
},function(){
    clearTimeout(maptimer);
    $(".maps").find("iframe").css("pointer-events", "none");
});

Cheers.

查看更多
等我变得足够好
7楼-- · 2019-01-03 12:13
var mapOptions = {
   scrollwheel: false,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
查看更多
登录 后发表回答