Page Summary

outlined_flag

• This documentation explains how to control user interactions, such as zoom and pan, on Google Maps using options likegestureHandling,minZoom,maxZoom, andrestriction.

• ThegestureHandling option allows you to manage how the map responds to scroll events and touch gestures, with options likecooperative,greedy,auto, andnone.

• You can completely disable panning and zooming by settinggestureHandling to "none" andzoomControl to false.

• Therestriction,minZoom, andmaxZoom options can be used to limit the map's viewable area and zoom levels, providing further control over user interaction.

Overview

The usage of a map on a web page may require specific options to control the way users interact with the map to zoom and pan. These options, such asgestureHandling,minZoom,maxZoom andrestriction, are defined within theMapOptions interface.

Default Behavior

The following map demonstrates the default behavior for map interactions with a map instantiated with only thezoom andcenter options defined.

The code for this map is below.

newgoogle.maps.Map(document.getElementById("map")!,{zoom,center,});
index.ts

newgoogle.maps.Map(document.getElementById("map"),{zoom,center,});
index.js

Controlling Gesture Handling

When a user scrolls a page that contains a map, the scrolling action canunintentionally cause the map to zoom. This behavior can be controlled using thegestureHandling map option.

gestureHandling:cooperative

The map below uses thegestureHandling option settocooperative, allowing the user to scroll the page normally, without zoomingor panning the map. Users can zoom the map by clicking the zoom controls. Theycan also zoom and pan by using two-finger movements on the map for touchscreendevices.

The code for this map is below.

newgoogle.maps.Map(document.getElementById("map")!,{zoom,center,gestureHandling:"cooperative",});
index.ts

newgoogle.maps.Map(document.getElementById("map"),{zoom,center,gestureHandling:"cooperative",});
index.js

View Sample

gestureHandling:auto

The map at the top of the page without thegestureHandling option has the samebehavior as the preceding map withgestureHandlingset tocooperative because all of the maps on this page are within an<iframe>. The defaultgestureHandling valueauto switches betweengreedy andcooperative based upon whether the map iscontained within an<iframe>.

gestureHandling:greedy

A map withgestureHandling set togreedy isbelow. This map reacts to all touch gestures and scroll events unlikecooperative.

gestureHandling:none

ThegestureHandling option can also be set tonone to disable gestures on the map.

To entirely disable the ability to pan and zoom the map, two options,gestureHandling andzoomControl, must be included.

newgoogle.maps.Map(document.getElementById("map")!,{zoom,center,gestureHandling:"none",zoomControl:false,});
index.ts

newgoogle.maps.Map(document.getElementById("map"),{zoom,center,gestureHandling:"none",zoomControl:false,});
index.js

The map below demonstrates the combination ofgestureHandling andzoomControl in the code above.

Restricting Map Bounds and Zoom

It may be desireable to allow gestures and zoom controls but restrict the map toa particular bounds or a minimum and maximum zoom. To accomplish this you mayset therestriction,minZoom,andmaxZoom options. The following code and mapdemonstrate these options.

newgoogle.maps.Map(document.getElementById("map")!,{zoom,center,minZoom:zoom-3,maxZoom:zoom+3,restriction:{latLngBounds:{north:-10,south:-40,east:160,west:100,},},});
index.ts

newgoogle.maps.Map(document.getElementById("map"),{zoom,center,minZoom:zoom-3,maxZoom:zoom+3,restriction:{latLngBounds:{north:-10,south:-40,east:160,west:100,},},});
index.js