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 mode="hybrid" center="-36.86, 174.76" tilt="67.5" range="10000"></gmp-map-3d>
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "<YOUR_API_KEY>",
v: "alpha"
});
</script>
<script>
const map = document.querySelector('gmp-map-3d');
async function init() {
// Import the needed libraries.
await google.maps.importLibrary('maps3d');
map.bounds = {south: -48.30, west: 163.56, north: -32.86, east: -180};
}
init();
</script>
</body>
</html>