Announcement: New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see New map style for Google Maps Platform.

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>