Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/controls.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/controls.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/interaction.md.txt "View this page for the JavaScript platform docs.")
## 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 as `gestureHandling`, `minZoom`, `maxZoom` and `restriction`, are defined within the [MapOptions interface](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions).
## Default Behavior
The following map demonstrates the default behavior for map interactions with a map instantiated with only the `zoom` and `center` options defined.
The code for this map is below.
### TypeScript
```typescript
new google.maps.Map(document.getElementById("map")!, {
zoom,
center,
});
```
> [!NOTE]
> **Note:** Read the [guide](https://developers.google.com/maps/documentation/javascript/using-typescript.md.txt) on using TypeScript and Google Maps.
### JavaScript
```javascript
new google.maps.Map(document.getElementById("map"), {
zoom,
center,
});
```
## Controlling Gesture Handling
When a user scrolls a page that contains a map, the scrolling action can
unintentionally cause the map to zoom. This behavior can be controlled using the
[gestureHandling](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.gestureHandling) map option.
### gestureHandling: `cooperative`
The map below uses the [gestureHandling](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.gestureHandling) option set
to `cooperative`, allowing the user to scroll the page normally, without zooming
or panning the map. 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.
The code for this map is below.
### TypeScript
```typescript
new google.maps.Map(document.getElementById("map")!, {
zoom,
center,
gestureHandling: "cooperative",
});
```
> [!NOTE]
> **Note:** Read the [guide](https://developers.google.com/maps/documentation/javascript/using-typescript.md.txt) on using TypeScript and Google Maps.
### JavaScript
```javascript
new google.maps.Map(document.getElementById("map"), {
zoom,
center,
gestureHandling: "cooperative",
});
```
[View Sample](https://developers.google.com/maps/documentation/javascript/examples/interaction-cooperative.md.txt)
### gestureHandling: `auto`
The map at the top of the page without the `gestureHandling` option has the same
behavior as the preceding map with [gestureHandling](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.gestureHandling)
set to `cooperative` because all of the maps on this page are within an
`
### gestureHandling: `none`
The [gestureHandling](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.gestureHandling) option can also be set to
`none` to disable gestures on the map.
> [!NOTE]
> **Note:** The `gestureHandling` option does not apply to the Street View service.
## Disabling Pan and Zoom
To entirely disable the ability to pan and zoom the map, two options,
[gestureHandling](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.gestureHandling) and
[zoomControl](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.zoomControl), must be included.
### TypeScript
```typescript
new google.maps.Map(document.getElementById("map")!, {
zoom,
center,
gestureHandling: "none",
zoomControl: false,
});
```
> [!NOTE]
> **Note:** Read the [guide](https://developers.google.com/maps/documentation/javascript/using-typescript.md.txt) on using TypeScript and Google Maps.
### JavaScript
```javascript
new google.maps.Map(document.getElementById("map"), {
zoom,
center,
gestureHandling: "none",
zoomControl: false,
});
```
The map below demonstrates the combination of
[gestureHandling](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.gestureHandling) and
[zoomControl](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.zoomControl) in the code above.
## Restricting Map Bounds and Zoom
It may be desirable to allow gestures and zoom controls but restrict the map to
a particular bounds or a minimum and maximum zoom. To accomplish this you may
set the [restriction](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.restriction), [minZoom](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.minZoom),
and [maxZoom](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.maxZoom) options. The following code and map
demonstrate these options.
### TypeScript
```typescript
new google.maps.Map(document.getElementById("map")!, {
zoom,
center,
minZoom: zoom - 3,
maxZoom: zoom + 3,
restriction: {
latLngBounds: {
north: -10,
south: -40,
east: 160,
west: 100,
},
},
});
```
> [!NOTE]
> **Note:** Read the [guide](https://developers.google.com/maps/documentation/javascript/using-typescript.md.txt) on using TypeScript and Google Maps.
### JavaScript
```javascript
new google.maps.Map(document.getElementById("map"), {
zoom,
center,
minZoom: zoom - 3,
maxZoom: zoom + 3,
restriction: {
latLngBounds: {
north: -10,
south: -40,
east: 160,
west: 100,
},
},
});
```