edisplay
10/25/2016 - 9:29 PM

Disable mouse scroll wheel zoom on embedded Google Maps

Disable mouse scroll wheel zoom on embedded Google Maps

abc.html
content_copyfile_download

<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>
abc.css
content_copyfile_download
.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}
Disable mouse scroll wheel zoom on embedded Google Maps
content_copyfile_download
Question:

I work 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?


Solution: 
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:
In my CSS i created the class:


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 :)


For more infromation: 
https://developer.mozilla.org/en/docs/Web/CSS/pointer-events