Hello, Readers!

I worked on a PSD recently and it required me to embed a map into it which was done successfully. I embedded a Google Map using iFrames.

But in doing so, I came across a problem. The problem was: When we/user scroll the page and at that time when the mouse pointer comes over the map, the map starts to zoom in/out whereas map should stay ideal and page scrolling should continue. Menas the map is interfering by zooming in/out when automatically when the cursor came over the map at the time of scrolling the page.

Is there a way to disable this zoom in/out due to mouse scroll?

Original map :

Map after mouse scroll :

Yes, there is a way out and it is the easiest in my opinion.

Simply add the CSS property "pointer-events" to the iframe div and set it's value to 'none'.

<iframe style="pointer-events:none;" src= ...... >

To note, this solution will also disable all other mouse pointer events on the map. In case, one requires any sort of user interaction on the map, this might not be successful.

Keep Coding!