Select platform: [Android](https://developers.google.com/maps/documentation/maps-3d/android-sdk/map-camera-restrictions.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/map-camera-restrictions.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/3d/interaction.md.txt "View this page for the JavaScript platform docs.")
It may be desirable for you to control the camera's pan, maximum altitude, or to
create latitude and longitude boundaries restricting a user's movement in a
given map. You can do this using *camera restrictions*.
The following example shows a map with location boundaries set to limit the
camera's movement:
## Restrict map bounds
You can restrict the geographical boundaries of the camera by setting the
`bounds` option.
The following code sample demonstrates restricting the map bounds:
### TypeScript
```typescript
async function init(): Promise {
await google.maps.importLibrary('maps3d');
const map3DElement = document.querySelector('gmp-map-3d')!;
// Restrict the position of the camera to the specified bounds.
map3DElement.bounds = {
south: -48.3,
west: 163.56,
north: -32.86,
east: -180,
};
}
void init();
```
### JavaScript
```javascript
async function init() {
await google.maps.importLibrary('maps3d');
const map3DElement = document.querySelector('gmp-map-3d');
// Restrict the position of the camera to the specified bounds.
map3DElement.bounds = {
south: -48.3,
west: 163.56,
north: -32.86,
east: -180,
};
}
void init();
```
### CSS
```css
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
```
### HTML
```html
Map
```
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/3d-camera-boundary/jsfiddle)
## Restrict the camera
You can restrict the movement of the camera by setting any of the following
options:
- `maxAltitude`
- `minAltitude`
- `maxHeading`
- `minHeading`
- `maxTilt`
- `minTilt`
The following code sample demonstrates restricting the camera:
```javascript
// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;
```
## Restrict map and camera bounds
You can simultaneously restrict both map and camera bounds. The following code
sample demonstrates restricting both map and camera boundaries:
```javascript
// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;
// Restrict the position of the camera to the specified bounds.
map3DElement.bounds = {
north: 20.93,
west: -156.38,
south: 20.90,
east: -156.31,
};
```
## Control gesture handling
When a user scrolls a page containing a map, the scrolling action can
inadvertently cause the map to zoom. You can control this behavior by setting
the `gestureHandling` map option.
### gestureHandling: `cooperative`
"Cooperative" gesture handling allows the user to scroll the page without
impacting the map's zoom or pan. To zoom, users can use the controls, two-finger
gestures (for touchscreen devices), or by holding `CMD/CTRL` while scrolling.
The following code demonstrates setting gesture handling to "cooperative":
```html
```
### gestureHandling: `greedy`
"Greedy" gesture handling reacts to all scroll events and touch gestures.
### gestureHandling: `auto`
"Auto" gesture handling changes the behavior of the map depending on whether or
not the map is contained in an `