Map Controls and the Default UI

Controls enabled by default

The following is a list of controls that are enabled by default:

• The zoomControl appears on the bottom-right section of the map. It allows the user to control the map’s zoom level using two buttons labeled “+” and “-”.

• The mapTypeControl is displayed by default as a horizontal button or dropdown bar at the top-left corner of the map. This control allows the user to choose from four map types—roadmap, satellite, terrain, or hybrid.

• The streetViewControl is represented by a Pegman icon displayed at the bottom-right corner of the map. It allows the user to enable Street View by dragging the icon to the part of the map that needs to be viewed.

• The fullScreenControl is located on the top-right corner of the map. It allows the user to open the map in fullscreen mode.

• The keyboardShortcuts control displays a set of keyboard shortcuts to the user.

Controls disabled by default

The following is a list of controls that are disabled by default:

• The rotateControl allows the user to tilt and rotate maps with oblique imagery. This control is only available with the satellite and hybrid map types and has a minimum zoom level of 12.

• The scaleControl displays a map scale object to the user.

Initialize default map controls

Unlike other objects on the map, map controls can’t be directly accessed or modified because there are no control objects. Instead, the MapOptions fields must be adjusted to modify these controls during map construction. One other option is to modify the map dynamically using the setOptions() method after map construction.

There’s no need to modify or set any control options to display a map with the default controls. It’s also important to note that all default controls disappear if the map is smaller than 200 by 200 pixels. However, there is a way to override this behavior by explicitly setting these controls to be visible.

Code example

Here’s an implementation of a map with the default controls. Notice that the map doesn’t display the scale and rotate controls:

Here’s a brief explanation of the JavaScript file in the above code widget:

• Lines 2–5: We declare a simple Map object called map.
• Lines 3–4: To center the map on Sydney, we pass the center and zoom parameters to the map constructor. We pass no other parameters to the Map constructor, and hence the map renders with default controls.