Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Map API V3 Zoom only on prolonged focus

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.

like image 410
Benno Avatar asked Aug 05 '11 00:08

Benno


People also ask

How do I change the zoom level in Google Maps API?

Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.

How do you zoom in slightly on Google Maps?

Zoom in the map You can zoom in and out of the map with one hand. Double tap a spot on the map, and then: Drag down to zoom in. Drag up to zoom out.

How do I change the default zoom on Google Maps?

You can change the zoom level of the map using simple steps. Step 1 Go to Add or Edit Map page . Step 2 Select 'Default zoom level' in the 'Map Information section'. Step 3 click save map and see the changes.

How do you slow down zoom on Google Maps?

The shortcut is simple: just double-tap the maps interface, but instead of lifting your finger after the second tap (the shortcut for zooming in), you leave it touching the screen. Then a swipe up zooms out, and a swipe down zooms in.


1 Answers

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.
like image 111
Tomik Avatar answered Oct 18 '22 04:10

Tomik