The camera allows you to change the user’s viewpoint of the map. You can use camera modes to control the behavior of the map view during navigation. To set the camera mode, call one of the following methods associated with the camera:
Follow my location (
GoogleMap.followMyLocation) — The default camera mode for navigation. This mode sets the camera to the device or vehicle. During navigation, the camera automatically faces the direction of travel. When the high detail setting is enabled (
NavigationMapStyle.HIGH_DETAIL), 2-D building outlines are displayed when the zoom level is 19 or higher.
Pinned to location (
GoogleMap.moveCamera) — Fixes the camera at a specific location. When using this mode, you can set the camera location along with other camera properties like bearing, tilt, zoom, etc. When this view is selected and the Navigator has been initialized, the Re-center button is visible.
Show route overview (
SupportNavigationFragment.showRouteOverview) — Displays an overview of the remaining route, panning and zooming as needed to fit the route into the map view. When this view is selected, the Re-center button is visible.
Clicking the Re-center button sets the camera to
Follow my location mode
The most common camera setting is to have the camera set to the
device or vehicle, showing its current position within the journey. In
this camera mode, you can view the route with the car always headed up
the screen with an angled perspective (
you can see the car traveling with north (
or with heading (
CameraPerspective.TOP_DOWN_HEADING_UP) always at the top of
The following code fragment uses the
// Set the camera to follow the device (vehicle): mNavFragment.getMapAsync(googleMap -> googleMap.followMyLocation(CameraPerspective.TILTED))
Pinned to location mode
Pinned mode provides you with the most control of the
camera. In this mode, you place the camera in a specific location, assign
a bearing to orient the camera view, change the tilt to set the viewing angle, and
set the camera's zoom level.
The following code snippet demonstrates some of the common ways to move the camera.
private static final LatLng SYDNEY = new LatLng(-33.88, 151.21); private static final LatLng MOUNTAIN_VIEW = new LatLng(37.4, -122.1); private GoogleMap map; ... // Obtain the map from a SupportNavigationFragment or NavigationView. // Move the camera instantly to Sydney with a zoom of 15. map.moveCamera(CameraUpdateFactory.newLatLngZoom(SYDNEY, 15)); // Zoom in, animating the camera. map.animateCamera(CameraUpdateFactory.zoomIn()); // Zoom out to zoom level 10, animating with a duration of 2 seconds. map.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null); // Construct a CameraPosition focusing on Mountain View and animate the camera to that position. CameraPosition cameraPosition = new CameraPosition.Builder() .target(MOUNTAIN_VIEW) // Sets the center of the map to Mountain View .zoom(17) // Sets the zoom .bearing(90) // Sets the orientation of the camera to east .tilt(30) // Sets the tilt of the camera to 30 degrees .build(); // Creates a CameraPosition from the builder map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
Show route overview mode
showRouteOverview camera setting displays the entire journey.
For multiple-destination journeys, this mode displays the untraveled
portion of the route.
// Place the camera to see the remaining route: mNavFragment.showRouteOverview();
High detail setting
When the high detail setting is enabled, 2-D building outlines are displayed
when the zoom level of the camera is set to 19 or higher. You can override the
zoom level during navigation by using a
FollowMyLocationOptions object. This
allows you to increase the zoom level enough to display 2-D building outlines as
the user approaches their destination.
This example enables the high detail setting:
The following example overrides the zoom level of the camera during navigation. The zoom level is set to 15, which is high enough to display 2-D building outlines.
googleMap.followMyLocation( FollowMyLocationOptions.builder(CameraPerspective.TILTED) .setZoomLevel(15.0f) .build());
See Customize the Navigation UI to learn how to customize the way in which users interact with your map by determining which of the built-in UI components appear on the map.