When scrolling the mouse wheel over the embedded google maps, it will say to use ctrl + scroll to zoom the map.

I learned about a gesturehandling=auto or gesturehandling=greedy command you can tack onto the end of the embed URL in the iframe src attribute. I tried this, and it didn't work.

Does anyone know if it is still possible to scroll an embedded google map with a mouse wheel? If so, how would one go about enabling scrolling the mouse to zoom over an embedded map without holding ctrl?

Here is the code that I tried, which is still asking me to hold ctrl to scroll my map. I have tried this in firefox and edge.

    <iframe 
    src="=!1m10!1m8!1m3!1d157781.7349802922!2d-76.99238135019627!3d38.87518482466329!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1738621870539!5m2!1sen!2susgesturehandling=greedy"
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy" 
    referrerpolicy="no-referrer-when-downgrade">
    </iframe>

When scrolling the mouse wheel over the embedded google maps, it will say to use ctrl + scroll to zoom the map.

I learned about a gesturehandling=auto or gesturehandling=greedy command you can tack onto the end of the embed URL in the iframe src attribute. I tried this, and it didn't work.

Does anyone know if it is still possible to scroll an embedded google map with a mouse wheel? If so, how would one go about enabling scrolling the mouse to zoom over an embedded map without holding ctrl?

Here is the code that I tried, which is still asking me to hold ctrl to scroll my map. I have tried this in firefox and edge.

    <iframe 
    src="https://www.google/maps/embed?pb=!1m10!1m8!1m3!1d157781.7349802922!2d-76.99238135019627!3d38.87518482466329!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1738621870539!5m2!1sen!2susgesturehandling=greedy"
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy" 
    referrerpolicy="no-referrer-when-downgrade">
    </iframe>

• google-maps
• iframe
• src

1 Answer 1

This is because in <iframe> embed, Google Maps defaults to gestureHandling : 'cooperative' which requires the user to hold down the Ctrl key while scrolling to zoom the map since the API cannot determine whether the page is scrollable.

To enable scrolling without holding the Ctrl key, you need to use the Google Maps JavaScript API instead of an <iframe> and set an option gestureHandling: "greedy";