Add camera path animations

Select platform: Android iOS

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.

Fly to

The following code sample demonstrates how to animate the camera to fly to a specific point on a 3D map by calling the flyCameraTo method. To use this code sample, follow the instructions in Setup and Add a 3D map to your app to set up your Android Studio project with a basic 3D map. Then, add the following code to the MainActivity.kt file:

 // Add imports and define constants 
 import 
  
 com.google.android.gms.maps3d.model.latLngAltitude 
 const 
  
 val 
  
 EMPIRE_STATE_BUILDING_LATITUDE 
  
 = 
  
 40.748233 
 const 
  
 val 
  
 EMPIRE_STATE_BUILDING_LONGITUDE 
  
 = 
  
 - 
 73.985663 
 ... 
  
 // Add to the onMap3DViewReady method, after the googleMap3D object has been initialized 
 googleMap3D 
 . 
 flyCameraTo 
 ( 
  
 flyToOptions 
  
 { 
  
 endCamera 
  
 = 
  
 camera 
  
 { 
  
 center 
  
 = 
  
 latLngAltitude 
  
 { 
  
 latitude 
  
 = 
  
 EMPIRE_STATE_BUILDING_LATITUDE 
  
 longitude 
  
 = 
  
 EMPIRE_STATE_BUILDING_LONGITUDE 
  
 altitude 
  
 = 
  
 212.0 
  
 // in meters 
  
 } 
  
 heading 
  
 = 
  
 34.0 
  
 // bearing in degrees 
  
 tilt 
  
 = 
  
 67.0 
  
 // relative to vertical 
  
 range 
  
 = 
  
 750.0 
  
 // distance away from the focal point in meters 
  
 roll 
  
 = 
  
 0.0 
  
 // roll relative to horizontal 
  
 } 
  
 durationInMillis 
  
 = 
  
 2 
 _000 
  
 } 
 ) 

Fly around

The following code sample demonstrates how to animate the camera to fly around a specific point on a 3D map by calling the flyCameraAround method. To use this code sample, follow the instructions in Setup and Add a 3D map to your app to set up your Android Studio project with a basic 3D map. Then, add the following code to the MainActivity.kt file:

 // Add imports and define constants 
 import 
  
 com.google.android.gms.maps3d.model.latLngAltitude 
 const 
  
 val 
  
 EMPIRE_STATE_BUILDING_LATITUDE 
  
 = 
  
 40.748233 
 const 
  
 val 
  
 EMPIRE_STATE_BUILDING_LONGITUDE 
  
 = 
  
 - 
 73.985663 
 ... 
 // Add to the onMap3DViewReady method, after the googleMap3D object has been initialized 
 googleMap3D 
 . 
 flyCameraAround 
 ( 
  
 flyAroundOptions 
  
 { 
  
 center 
  
 = 
  
 camera 
  
 { 
  
 center 
  
 = 
  
 latLngAltitude 
  
 { 
  
 latitude 
  
 = 
  
 EMPIRE_STATE_BUILDING_LATITUDE 
  
 longitude 
  
 = 
  
 EMPIRE_STATE_BUILDING_LONGITUDE 
  
 altitude 
  
 = 
  
 212.0 
  
 } 
  
 heading 
  
 = 
  
 34.0 
  
 tilt 
  
 = 
  
 67.0 
  
 range 
  
 = 
  
 750.0 
  
 roll 
  
 = 
  
 0.0 
  
 } 
  
 durationInMillis 
  
 = 
  
 5 
 _000 
  
 rounds 
  
 = 
  
 1.0 
  
 // Number of rotations - can be fractional 
  
 } 
 ) 
Create a Mobile Website
View Site in Mobile | Classic
Share by: