Controls on Google Maps

Google Maps - Default controls

When displaying the standard Google Map, it provides the default set of controls:

  • Zoom - Show a slider or "+/-" buttons to control the map's zoom level
  • Pan - Show the pan control used to pan the map
  • Map Type - Allow users to switch between map types (roadmap and satellite view)
  • Street View - Show the Pegman icon, which can be dragged to the map to enable street view

Google Maps - More controls

In addition to the default controls, Google Maps also provides:

  • Scale - Show the map scale element
  • Rotate - Show a small circular icon that allows you to rotate the map
  • Overview Map - Show a thumbnail overview map that reflects the current map viewport over a wider area

You can specify which controls to display when creating the map (within MapOptions) or change the map's options by calling setOptions().

Google Maps - Disable default controls

You may want to turn off the default controls.

For this, set the map's disableDefaultUI property (within the map's options object) to true:

instance

var mapOptions {disableDefaultUI: true}

Google Maps - Open all controls

Some controls appear on the map by default; others do not, unless you set them.

Please specify in the map options object which controls to add or remove from the map.

Setting a control to true makes it visible - setting it to false hides it.

This example opens all controls:

instance

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google Maps - Modify Controls

Some map controls are configurable.

You can modify the control by specifying the options field of the control.

For example, the zoomControlOptions field specifies the options used to modify the Zoom control. The zoomControlOptions field may include:

  • google.maps.ZoomControlStyle.SMALL - Displays a mini zoom control (only + and - buttons)
  • google.maps.ZoomControlStyle.LARGE - Displays the standard zoom slider control
  • google.maps.ZoomControlStyle.DEFAULT - Selects the best zoom control based on the device and map size

instance

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

Note: If you want to modify the control, please enable it first (set it to true).

Another configurable control is the MapType control.

The mapTypeControlOptions field specifies the options used to modify the control. The mapTypeControlOptions field may include:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - Displays a button for each map type
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - Selects map types through a dropdown menu
  • google.maps.MapTypeControlStyle.DEFAULT - Displays the 'default' behavior (depending on screen size)

instance

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

You can also use the ControlPosition property to position the control:

instance

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