Disable scroll zoom on embedded Google Maps

README.md

Reference: http://stackoverflow.com/questions/21992498/disable-mouse-scroll-wheel-zoom-on-embedded-google-maps

The Problem When scrolling, the Google Map starts to zoom in/out the map instead of continuing scrolling the page. = No bueno.

The Solution Add a div with an .overlay before the iframe insertion. The div will cover the map, preventing pointer events from effecting it. But, if you click on the div, it will become transparent to pointer events, activating the map.

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

styles.css

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