Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to disable zoom via mouse scroll on embedded Google Maps?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.22k
    Comment on it

    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!

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: