abhishekdagarit · October 25, 2016 21:29
diff --git a/abc.css b/abc.css
 .overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
 }
diff --git a/abc.html b/abc.html

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

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