Disable mouse scroll wheel zoom on embedded Google Maps

google-maps scrollwheel
holiveira picture holiveira · Feb 24, 2014 · Viewed 296k times · Source

I am working 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?

Answer

Massa picture Massa · Mar 21, 2014

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:

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

In my CSS i created the class:

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

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

Related questions

Selecting last element in JavaScript array

I'm making an application that updates a user's location and path in real time and displays this on a Google Map. I have functionality that allows multiple users to be tracked at the same time using an object, which is …

Read More
Google Maps JS API v3 - Simple Multiple Marker Example

Fairly new to the Google Maps Api. I've got an array of data that I want to cycle through and plot on a map. Seems fairly simple, but all the multi-marker tutorials I have found are quite complex. Let's use …

Read More
SHA-1 fingerprint of keystore certificate

Is the method for getting a SHA-1 fingerprint the same as the method of getting the a fingerprint? Previously, I was running this command: It's not clear to me if the result I'm getting is the SHA-1 fingerprint. Can somebody …

Read More