This example creates a map that starts in Auckland, New Zealand. The map is
restricted to New Zealand. The user can pan away from Auckland and explore other
New Zealand cities, but the user cannot pan or zoom to beyond the constraints
set on the map.
Try panning north, or zooming out, to see what happens when a user tries to move
beyond these boundaries.
### TypeScript
```typescript
let innerMap: google.maps.Map;
const mapElement = document.querySelector('gmp-map')!;
const NEW_ZEALAND_BOUNDS = {
north: -34.36,
south: -47.35,
west: 166.28,
east: -175.81,
};
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps');
innerMap = mapElement.innerMap;
// Restrict the map to the provided bounds.
innerMap.setOptions({
restriction: {
latLngBounds: NEW_ZEALAND_BOUNDS,
strictBounds: false,
},
});
}
void init();
```
### JavaScript
```javascript
let innerMap;
const mapElement = document.querySelector('gmp-map');
const NEW_ZEALAND_BOUNDS = {
north: -34.36,
south: -47.35,
west: 166.28,
east: -175.81,
};
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps');
innerMap = mapElement.innerMap;
// Restrict the map to the provided bounds.
innerMap.setOptions({
restriction: {
latLngBounds: NEW_ZEALAND_BOUNDS,
strictBounds: false,
},
});
}
void init();
```
### CSS
```css
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
```
### HTML
```html
Map Bounds Restriction
```
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/control-bounds-restriction/jsfiddle)
### 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. You will also need a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key.md.txt).
The following commands clone the repository, install dependencies, and copy the environment file.
```javascript
git clone https://github.com/googlemaps-samples/js-api-samples.git
cd js-api-samples
npm i
cp .env.template .env
```
Once you copy the environment file, make sure to open the `.env` file and replace `` with your actual API key before starting the sample.
```javascript
cd samples/control-bounds-restriction
npm start
```