Disable exploration controls
Exploration controls are enabled by default. To disable them, add
default-ui-disabled to the gmp-map-3d tag, as demonstrated below:
<gmp-map-3d range="639.274301042242" tilt="64.92100184857551" center="34.0768990953219,-118.47450491266041,292.9794737933403" heading="-61.02026752077781" default-ui-disabled></gmp-map-3d>
Preset camera paths
FlyCameraTo
The following sample flies the camera from the San Jose Airport (SJC) to the San Francisco Airport (SFO).
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Fly Camera To Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
width: 800px;
}
</style>
</head>
<body>
<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",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script type="text/javascript">
// Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import
async function init() {
const { Map3DElement } = await google.maps.importLibrary("maps3d");
const map = new Map3DElement({
center: { lat: 37.36353, lng: -121.9286, altitude: 0 },
tilt: 67.5,
range: 1000
});
document.body.append(map);
map.flyCameraTo({
endCamera: {
center: { lat: 37.6191, lng: -122.3816 },
tilt: 67.5,
range: 1000
},
durationMillis: 5000
});
}
init();
</script>
</body>
</html>
FlyCameraAround
The following example flies the camera around the Eiffel Tower.
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Fly Camera Around Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
width: 800px;
}
</style>
</head>
<body>
<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",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script type="text/javascript">
// Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import
async function init() {
const { Map3DElement } = await google.maps.importLibrary("maps3d");
const camera = {
center: { lat: 48.8584, lng: 2.2945, altitude: 0 },
tilt: 55,
range: 1500
};
const map = new Map3DElement({
...camera,
defaultLabelsDisabled: true
});
document.body.append(map);
map.flyCameraAround({
camera,
durationMillis: 60000,
rounds: 1
});
}
init();
</script>
</body>
</html>
Combine animations
The following example flies the camera from Google's Mountain View office to the Eiffel Tower, then circles the Eiffel Tower.
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Combine Animations Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
width: 800px;
}
</style>
</head>
<body>
<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",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script type="text/javascript">
// Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import
async function init() {
const { Map3DElement } = await google.maps.importLibrary("maps3d");
const flyToCamera = {
center: { lat: 48.8584, lng: 2.2945, altitude: 0 },
tilt: 55,
range: 1500
};
const map = new Map3DElement({
center: { lat: 37.4239163, lng: -122.0947209, altitude: 0 },
tilt: 67.5,
range: 1000,
defaultLabelsDisabled: true
});
document.body.append(map);
map.flyCameraTo({
endCamera: flyToCamera,
durationMillis: 5000,
});
map.addEventListener('gmp-animationend', () => {
map.flyCameraAround({
camera: flyToCamera,
durationMillis: 60000,
rounds: 1
});
}, {once: true});
}
init();
</script>
</body>
</html>
Stop animation
The following example shows how to stop animation.
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript stop animation</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
selector {
padding: 2px;
float: right;
}
</style>
</head>
<body>
<selector>
<button type="button" id="stopButton">Stop animation</button>
</selector>
<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",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<div id="map">
<script type="text/javascript">
// Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import
let map;
async function init() {
const { Map3DElement } = await google.maps.importLibrary("maps3d");
const camera = {
center: { lat: 48.8584, lng: 2.2945, altitude: 0 },
tilt: 55,
range: 1500
};
map = new Map3DElement({
...camera,
defaultLabelsDisabled: true
});
document.body.append(map);
map.flyCameraAround({
camera,
durationMillis: 60000,
rounds: 1
});
}
document.getElementById('stopButton').addEventListener('click', () => {
map.stopCameraAnimation();
});
init();
</script>
</div>
</body>
</html>