This example uses the `cooperative` value for the
`gestureHandling` option to control the panning and scrolling
behavior of a map when viewed on a mobile device.
Read the [documentation](https://developers.google.com/maps/documentation/javascript/interaction.md.txt).
### TypeScript
```typescript
/**
* This sample sets the gesture handling mode to 'cooperative',
* which means that on a mobile device, the user must swipe with one
* finger to scroll the page and two fingers to pan the map.
*/
function initMap(): void {
const center = { lat: -25.363, lng: 131.044 };
const zoom = 4;
new google.maps.Map(document.getElementById("map")!, {
zoom,
center,
gestureHandling: "cooperative",
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
```
> [!NOTE]
> **Note:** Read the [guide](https://developers.google.com/maps/documentation/javascript/using-typescript.md.txt) on using TypeScript and Google Maps.
### JavaScript
```javascript
/**
* This sample sets the gesture handling mode to 'cooperative',
* which means that on a mobile device, the user must swipe with one
* finger to scroll the page and two fingers to pan the map.
*/
function initMap() {
const center = { lat: -25.363, lng: 131.044 };
const zoom = 4;
new google.maps.Map(document.getElementById("map"), {
zoom,
center,
gestureHandling: "cooperative",
});
}
window.initMap = initMap;
```
> [!NOTE]
> **Note:** The JavaScript is compiled from the TypeScript snippet.
### CSS
```css
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
```
### HTML
```html
Cooperative Gesture Handling
```
### Clone Sample
Git and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
```javascript
git clone -b sample-interaction-cooperative https://github.com/googlemaps/js-samples.git
cd js-samples
npm i
npm start
```
Other samples can be tried by switching to any branch beginning with `sample-SAMPLE_NAME`.
```javascript
git checkout sample-SAMPLE_NAME
npm i
npm start
```