Camera boundary restriction

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Photorealistic 3D Maps in Maps JavaScript Camera Restriction Demo</title>
    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }

      gmp-map-3d {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="-36.86, 174.76" tilt="67.5" range="10000"></gmp-map-3d>

    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>

    <script>
      const map = document.querySelector('gmp-map-3d');

      customElements.whenDefined(map.localName).then(() => {
        map.bounds = {south: -48.30, west: 163.56, north: -32.86, east: -180.}
      });
    </script>
  </body>
</html>