Select platform: [Android](https://developers.google.com/maps/documentation/maps-3d/android-sdk/configure-camera-controls.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/configure-camera-controls.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/3d/map-controls.md.txt "View this page for the JavaScript platform docs.")

<br />

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

> [!TIP]
> **Tip:** To enforce restrictions on the latitude, longitude, and camera behavior, see [Control the map and camera](https://developers.google.com/maps/documentation/javascript/3d/interaction.md.txt).

## 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](https://developers.google.com/static/maps/documentation/javascript/images/3d-controls.png)

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 **Map mode control** lets you toggle between `ROADMAP` mode and photorealistic (`HYBRID` or `SATELLITE`) mode.

The following code sample demonstrates toggling exploration controls:

### JavaScript

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

### HTML

```html
<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](https://developers.google.com/maps/documentation/javascript/3d/interaction.md.txt).
- Learn how to [listen for and handle user interaction](https://developers.google.com/maps/documentation/javascript/3d/map-events.md.txt).