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:
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
,
bounds
:
{
south
:
37
,
west
:
-
123
,
north
:
38
,
east
:
-
121
}
});
init
();
}
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
();
