Google Maps Controls

A Google Map - Default Controls Settings:

Google Maps - Default Controls Settings

When using a standard Google Map, its default settings are as follows:

Zoom - Displays a slider bar to control the map's zoom level
Pan - Shows a pan control (a kind of bowl-shaped widget) on the map; clicking the four corners pans the map
MapType - Allows users to switch between map types (roadmap and satellite)
StreetView - Displays a little Street View person icon that can be dragged to a point on the map to open Street View

Google Maps - Additional Controls

Beyond the default controls, Google also has:

Scale - Displays the map scale
Rotate - Shows a small circular icon that can rotate the map
Overview Map - Provides a bird's‑eye view of the map from a wider perspective

When creating a map, you can specify which controls to display via options, or change the map's settings by calling setOptions().

Google Maps - Disabling Default Controls

You may wish to turn off the default controls.

To disable default controls, set the map's disableDefaultUI property to true:

Example

disableDefaultUI:true

Try it »

Google Maps - Enabling All Controls

Some controls are displayed by default on the map, while others are not unless you explicitly enable them.

Set a control to true to make it visible; set it to false to hide it.

The following example enables all controls:

Example

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

Try it »

Google Maps - Modifying Controls

Some map controls are configurable. You can change the controls by specifying options fields.

For example, to modify the zoom control's options, specify them in zoomControlOptions. zoomControlOptions includes the following three options:

google.maps.ZoomControlStyle.SMALL - Displays a minimized zoom control
google.maps.ZoomControlStyle.LARGE - Displays the standard zoom slider control
google.maps.ZoomControlStyle.DEFAULT - Chooses the most suitable control based on device and map size

Example

zoomControl:true,
zoomControlOptions:{
 style:google.maps.ZoomControlStyle.SMALL
}

Try it »

Note: To modify a control, first enable it (set it to true).

Another control is the MapType control.

The MapType control can be displayed as one of the following style options:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR - Displays a set of controls in a horizontal bar as buttons, similar to Google Maps.
google.maps.MapTypeControlStyle.DROPDOWN_MENU - Displays a single button control that lets you select the map type from a dropdown menu.
google.maps.MapTypeControlStyle.DEFAULT - Displays the "default" behavior, which depends on screen size and may change in future API versions.

Example

mapTypeControl:true,
mapTypeControlOptions: {
 style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Try it »

You can also use the ControlPosition property to specify the control's position:

Example

mapTypeControl:true,
mapTypeControlOptions: {
 style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
 position:google.maps.ControlPosition.TOP_CENTER
}

Try it »

Google Maps - Custom Controls

Create a custom control that returns to London, used for click events (if the map is dragged):

Example

controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home'
controlUI.appendChild(controlText);

Try it »

Google Maps - Controls Reference

Google Maps API Reference

YouTip