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

Disable scroll zoom on embedded Google Maps

Disable scroll zoom on embedded Google Maps

styles.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 */ 
}
index.html
content_copyfile_download
<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>
README.md
content_copyfile_download
  • Rendered
  • Source

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.