Controls

Page Summary

outlined_flag

• Google Maps offers built-in UI controls for features like zoom, map type, and street view, which can be customized or disabled.

• Developers can create and add custom interactive controls using HTML, CSS, and JavaScript, placed using predefined positions.

• Custom controls can respond to user input and map events, enhancing map interactivity.

• The position property influences the placement of controls on the map, offering various predefined positions for arrangement.

• Control customization options include modifying appearance, behavior, and state, allowing for tailored map experiences.

Controls Overview

The maps displayed through the Maps JavaScript API contain UI elements to allow user interaction with the map. These elements are known as controls and you can include variations of these controls in your application. Alternatively, you can do nothing and let the Maps JavaScript API handle all control behavior.

The following map shows the default set of controls displayed by the Maps JavaScript API:

Clockwise from top left: Map Type, Fullscreen, Camera, Street View, Keyboard shortcuts.

Below is a list of the full set of controls you can use in your maps:

• The Map Type control is available in a drop-down or horizontal button bar style, allowing the user to choose a map type (ROADMAP, SATELLITE, HYBRID, or TERRAIN). This control appears by default in the top left corner of the map.
• The Fullscreen control offers the option to open the map in fullscreen mode. This control is enabled by default on desktop and mobile devices. Note: iOS doesn't support the fullscreen feature. The fullscreen control is therefore not visible on iOS devices.
• The Camera control features both zoom and pan controls.
• The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View. This control appears by default near the bottom right of the map.
• The Rotate control provides a combination of tilt and rotate options for maps containing 3D imagery. This control appears by default near the bottom right of the map. See 3D overview for more information.
• The Scale control displays a map scale element. This control is disabled by default.
• The Keyboard shortcuts control displays a list of keyboard shortcuts for interacting with the map.

You don't access or modify these map controls directly. Instead, you modify the map's MapOptions fields which affect the visibility and presentation of controls. You can adjust control presentation upon instantiating your map (with appropriate MapOptions) or modify a map dynamically by calling setOptions() to change the map's options.

Not all of these controls are enabled by default. To learn about default UI behavior (and how to modify such behavior), see The Default UI below.

The Default UI

By default, all the controls disappear if the map is too small (200x200px). You can override this behavior by explicitly setting the control to be visible. See Adding Controls to the Map.

The behavior and appearance of the controls is the same across mobile and desktop devices, except for the fullscreen control (see the behavior described in the list of controls).

Additionally, keyboard handling is on by default on all devices.

Disable the Default UI

You may want to turn off the API's default UI buttons entirely. To do so, set the map's disableDefaultUI property (within the MapOptions object) to true. This property disables any UI control buttons from the Maps JavaScript API. It does not, however, affect mouse gestures or keyboard shortcuts on the base map, which are controlled by the gestureHandling and keyboardShortcuts properties respectively.

The following code disables the UI buttons:

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js

Add Controls to the Map

You may want to tailor your interface by removing, adding, or modifying UI behavior or controls and ensure that future updates don't alter this behavior. If you want to only add or modify existing behavior, you need to ensure that the control is explicitly added to your application.

Some controls appear on the map by default while others won't appear unless you specifically request them. Adding or removing controls from the map is specified in the following MapOptions object's fields, which you set to true to make them visible or set to false to hide them:

{
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl