Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Animate camera paths

Select platform: Android iOS JavaScript

You can add camera paths animations to your 3D map to provide a more immersive experience for your users. Camera path animations can fly to or fly around a point on the map.

The following example combines the flyCameraTo and flyCameraAround animations:

[フレーム]

See the complete example source code

TypeScript

asyncfunctioninit(){
const{Map3DElement}=awaitgoogle.maps.importLibrary('maps3d');
constmap=newMap3DElement({
center:{
lat:37.79810773998413,
lng:-122.41784275049939,
altitude:89.08476932205978,
},
range:6062.016931506805,
tilt:81.17100663963272,
heading:-56.047035719765596,
});
map.mode='SATELLITE';
document.body.append(map);
// Used for both the fly to function and the location to fly around.
constflyToCamera={
center:{
lat:21.263523536467105,
lng:-157.80663691939296,
altitude:80.28936069489404,
},
range:1500.8202963253427,
tilt:76.9173260789542,
heading:-44.59196007522445,
};
// Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
map.flyCameraTo({
// Where we are going to.
endCamera:flyToCamera,
// How long we want the flight to take.
durationMillis:30000,
});
// When the animation has completed, fly around the location.
map.addEventListener(
'gmp-animationend',
()=>{
map.flyCameraAround({
// Location to fly around.
camera:flyToCamera,
// Length of time to fly to the location.
durationMillis:50000,
// Number of rotations to make in the specified time.
repeatCount:1,
});
},
{once:true}
);// Stop animation after flying around.
// At any time stop the animation.
map.addEventListener('gmp-click',()=>{
map.stopCameraAnimation();
});
}
voidinit();index.ts

JavaScript

asyncfunctioninit(){
const{Map3DElement}=awaitgoogle.maps.importLibrary('maps3d');
constmap=newMap3DElement({
center:{
lat:37.79810773998413,
lng:-122.41784275049939,
altitude:89.08476932205978,
},
range:6062.016931506805,
tilt:81.17100663963272,
heading:-56.047035719765596,
});
map.mode='SATELLITE';
document.body.append(map);
// Used for both the fly to function and the location to fly around.
constflyToCamera={
center:{
lat:21.263523536467105,
lng:-157.80663691939296,
altitude:80.28936069489404,
},
range:1500.8202963253427,
tilt:76.9173260789542,
heading:-44.59196007522445,
};
// Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
map.flyCameraTo({
// Where we are going to.
endCamera:flyToCamera,
// How long we want the flight to take.
durationMillis:30000,
});
// When the animation has completed, fly around the location.
map.addEventListener(
'gmp-animationend',
()=>{
map.flyCameraAround({
// Location to fly around.
camera:flyToCamera,
// Length of time to fly to the location.
durationMillis:50000,
// Number of rotations to make in the specified time.
repeatCount:1,
});
},
{once:true}
);// Stop animation after flying around.
// At any time stop the animation.
map.addEventListener('gmp-click',()=>{
map.stopCameraAnimation();
});
}
voidinit();index.js

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;
}style.css

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: "GOOGLE_MAPS_API_KEY"
 });
 </script>
 </head>
 <body>
 <div id="map"></div>
 </body>
</html>index.html

Preset camera paths

3D Maps in Maps JavaScript provides two preset camera paths. The camera paths can be customized by changing the duration of the animation (thereby increasing or decreasing speed), or by combining them to create more cinematic experiences. Additionally, you can control the height of the camera by specifying the altitudeMode.

3D Maps in Maps JavaScript supports the following camera paths:

flyCameraTo animation flies from the map center to a specified destination.
flyCameraAround animation rotates around a point on the map the specified number of revolutions.

The two available paths may be combined to fly to a point of interest, rotate around it, and then stop when specified.

Fly to

The following code sample demonstrates animating the camera to fly to a location:

map.flyCameraTo({
// Where we are going to.
endCamera:flyToCamera,
// How long we want the flight to take.
durationMillis:30000,
});index.js

Fly around

The following code sample demonstrates animating the camera to fly around a location:

map.flyCameraAround({
// Location to fly around.
camera:flyToCamera,
// Length of time to fly to the location.
durationMillis:50000,
// Number of rotations to make in the specified time.
repeatCount:1,
});index.js

Combine animations

The following code sample demonstrates combining animations to fly the camera to a location, and then rotate around the location when the first animation ends:

asyncfunctioninit(){
const{Map3DElement}=awaitgoogle.maps.importLibrary('maps3d');
constmap=newMap3DElement({
center:{
lat:37.79810773998413,
lng:-122.41784275049939,
altitude:89.08476932205978,
},
range:6062.016931506805,
tilt:81.17100663963272,
heading:-56.047035719765596,
});
map.mode='SATELLITE';
document.body.append(map);
// Used for both the fly to function and the location to fly around.
constflyToCamera={
center:{
lat:21.263523536467105,
lng:-157.80663691939296,
altitude:80.28936069489404,
},
range:1500.8202963253427,
tilt:76.9173260789542,
heading:-44.59196007522445,
};
// Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively.
map.flyCameraTo({
// Where we are going to.
endCamera:flyToCamera,
// How long we want the flight to take.
durationMillis:30000,
});
// When the animation has completed, fly around the location.
map.addEventListener(
'gmp-animationend',
()=>{
map.flyCameraAround({
// Location to fly around.
camera:flyToCamera,
// Length of time to fly to the location.
durationMillis:50000,
// Number of rotations to make in the specified time.
repeatCount:1,
});
},
{once:true}
);// Stop animation after flying around.
// At any time stop the animation.
map.addEventListener('gmp-click',()=>{
map.stopCameraAnimation();
});
}
voidinit();index.js