The following example creates a 3D map positioned in Auckland, New Zealand. The map is restricted to New Zealand. The user can pan and tilt around the country, but can't pan or zoom beyond the restraints set on the map.
Read the [documentation](https://developers.google.com/maps/documentation/javascript/3d/interaction.md.txt).
### 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)
### 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/3d-camera-boundary
npm start
```