amy-d
8/26/2016 - 3:57 AM

Disable scroll zoom on embedded Google Maps

Disable scroll zoom on embedded Google Maps

.overlay { 
  background:transparent; 
  position:relative; 
  width:640px; 
  height:480px; /* your iframe height */ 
  top:480px; /* your iframe height */ 
  margin-top:-480px; /* your iframe height */ 
}
<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>

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.