3D map controls and exploration

Controls Overview

The maps displayed through the Photorealistic 3D Maps in Maps JavaScript API contain UI elements to support user interaction with the map. These elements are known as controls and you can elect to include them in the UI, or not to. If you suppress the UI controls, the user can still navigate around the map using keyboard shortcuts.

The Photorealistic 3D Maps in Maps JavaScript API also supports guiding your users around the map using preset camera paths. These paths can be customized and combined to create rich 3D experiences.

Exploration controls

The following image shows the default set of controls displayed by the Photorealistic 3D Maps in Maps JavaScript API:

Image of map with controls present

Below is a list of the full set of controls in the Photorealistic 3D Maps in Maps JavaScript:

  • The Zoom control displays "+" and "-" buttons for changing the zoom level of the map.
  • The Tilt control lets you change the camera's tilt.
  • The Rotate control lets you change the camera's heading.
  • The Move control displays "←", "→", "↑", and "↓" buttons for changing the center of the map.

The following code sample demonstrates toggling exploration controls:

JavaScriptHTML
const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

<gmp-map-3d
  mode="hybrid"
  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

Photorealistic 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.

Photorealistic 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 rounds.

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:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Fly around

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

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

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:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Next steps