Question

I’m using a google map api3 in my website and at the moment if you’re scrolling down the page, and happen to scroll over the google map (while not intending to), the map gets focus and starts to zoom in. As far as I’m aware, this is standard behaviour and not a bug or anything. I just would like to change it somehow…

I’m hoping there’s a way to modify how long it takes the google map to recognise the mouseover and give it focus/zooming-capability after a longer period of time? Or some other option to make it gain focus i.e. setTimeout(focus, 300); or something.

Answer 1

I’m afraid Google Maps API doesn’t offer any way to disable the default scroll behaviour. Although you can cancel zooming in the map, the scroll event doesn’t reach the page.

Ok, I missed the scrollwheel map option, it does exactly what you need. To achieve your desired behaviour:

• Set scrollwheel option to false when initializing the map.
• Add mouseover event listener which starts the timer.
• On timeout call map.setOptions(options) with scrollwheel option set to true.
• Add mouseout event listener that sets the scrollwheel map option false again.

Another way to achieve the desired behaviour is to use a small trick:

• Create a transparent div and place it over the map. Now the div gets the scroll event and the page behaves as usual.
• Start the timer when onmouseover event is called on the div.
• Hide the div on timeout.
• Add mouseout event listener to the map to show the div again.