It may be desirable for you to control the camera's pan, maximum altitude, or to create latitude and longitude boundaries restricting a user's movement in a given map. You can do this using camera restrictions .
The following example shows a map with location boundaries set to limit the camera's movement:
Restrict map bounds
You can restrict the geographical boundaries of the camera by setting the bounds
option.
The following code sample demonstrates restricting the map bounds:
TypeScript
async function init () { const { Map3DElement } = await google . maps . importLibrary ( 'maps3d' ); const map = new Map3DElement ({ center : { lat : - 36.86 , lng : 174.76 , altitude : 10000 }, tilt : 67.5 , mode : 'HYBRID' , bounds : { south : - 48.3 , west : 163.56 , north : - 32.86 , east : - 180 }, gestureHandling : 'COOPERATIVE' , }); document . body . append ( map ); } void init ();
JavaScript
async function init () { const { Map3DElement } = await google . maps . importLibrary ( 'maps3d' ); const map = new Map3DElement ({ center : { lat : - 36.86 , lng : 174.76 , altitude : 10000 }, tilt : 67.5 , mode : 'HYBRID' , bounds : { south : - 48.3 , west : 163.56 , north : - 32.86 , east : - 180 }, gestureHandling : 'COOPERATIVE' , }); document . body . append ( map ); } void init ();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ html , map { height : 100 % ; } body { height : 100 % ; margin : 0 ; padding : 0 ; }
HTML
<html> <head> <title>Map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <script> // prettier-ignore (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" }); </script> </head> <body> <div id="map"></div> </body> </html>
Try Sample
Restrict the camera
You can restrict the movement of the camera by setting any of the following options:
-
maxAltitude -
minAltitude -
maxHeading -
minHeading -
maxTilt -
minTilt
The following code sample demonstrates restricting the camera:
async
function
init
()
{
const
{
Map3DElement
,
MapMode
}
=
await
google
.
maps
.
importLibrary
(
"maps3d"
);
const
map
=
new
Map3DElement
({
center
:
{
lat
:
37.7704
,
lng
:
-
122.3985
,
altitude
:
500
},
tilt
:
67.5
,
mode
:
MapMode
.
HYBRID
,
minAltitude
:
1
,
maxAltitude
:
1000
,
minTilt
:
35
,
maxTilt
:
55
});
document
.
body
.
append
(
map
);
}
init
();
Restrict map and camera bounds
You can simultaneously restrict both map and camera bounds. The following code sample demonstrates restricting both map and camera boundaries:
async
function
init
()
{
const
{
Map3DElement
,
MapMode
}
=
await
google
.
maps
.
importLibrary
(
"maps3d"
);
const
map
=
new
Map3DElement
({
center
:
{
lat
:
37.7704
,
lng
:
-
122.3985
,
altitude
:
500
},
tilt
:
67.5
,
mode
:
MapMode
.
HYBRID
,
minAltitude
:
1
,
maxAltitude
:
1000
,
minTilt
:
35
,
maxTilt
:
55
,
bounds
:
{
south
:
37
,
west
:
-
123
,
north
:
38
,
east
:
-
121
}
});
document
.
body
.
append
(
map
);
}
init
();
Control gesture handling
When a user scrolls a page containing a map, the scrolling action can
inadvertently cause the map to zoom. You can control this behavior by setting
the gestureHandling
map option.
gestureHandling: cooperative
"Cooperative" gesture handling allows the user to scroll the page without
impacting the map's zoom or pan. To zoom, users can use the controls, two-finger
gestures (for touchscreen devices), or by holding CMD/CTRL
while scrolling.
The following code demonstrates setting gesture handling to "cooperative":
new
Map3DElement
({
center
:
{
lat
:
37.729901343702736
,
lng
:
-
119.63788444355905
,
altitude
:
1500
},
tilt
:
70
,
heading
:
50
,
range
:
4000
,
gestureHandling
:
'COOPERATIVE'
,
});
gestureHandling: greedy
"Greedy" gesture handling reacts to all scroll events and touch gestures.
gestureHandling: auto
"Auto" gesture handling changes the behavior of the map depending on whether or
not the map is contained in an <iframe>
, and whether the page is scrollable.
- If the map is within an
<iframe>, gesture handling will be "cooperative". - If the map isn't within an
<iframe>, gesture handling will be "greedy".
