3D map controls and exploration

Controls Overview

The maps displayed through the 3D Maps in Maps JavaScript API contain UI elements, known as exploration controls, to support user interaction with the map. Exploration controls are displayed in the map UI by default, but can be disabled for simplicity or to leave room for custom controls. Note that keyboard shortcuts for map exploration are available when UI controls are disabled.

The 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 3D Maps in Maps JavaScript API:

Image of map with controls present

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

• The Zoom control displays "+" and "-" buttons for changing the zoom level of the map.
• The Move control displays "←", "→", "↑", and "↓" buttons for changing the center of the map.
• The Rotate controls let you change the camera's heading.
• The Tilt control lets you change the camera's tilt.
• The Compass control indicates the direction of compass north, and allows for resetting the camera to a northerly heading.

The following code sample demonstrates toggling exploration controls:

constmap=newMap3DElement({
center:{lat:37.819852,lng:-122.478549,altitude:2000},
tilt:75,
heading:330,
mode:MapMode.SATELLITE,
defaultUIHidden: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>

Next steps

• Learn how to restrict the map and camera.
• Learn how to listen for and handle user interaction.