Control Customization

Add and remove map controls

In order to add new controls to the map or remove existing ones that are enabled by default, we modify the following properties in the mapOptions object:

new google.maps.Map(document.getElementById("map"), {
	zoomControl: true,
	mapTypeControl: true,
	streetViewControl: true,
	fullscreenControl: true,
	keyboardShortcuts: true,
	rotateControl: true,
	scaleControl: true,
});

We set the property to true to enable the control functionality and false to disable and hide it.

Note: By default, all controls disappear if the map is smaller than 200 by 200 pixels. However, this behavior can be overridden by explicitly specifying the controls that need to be visible by enabling them in the mapOptions object.

Code example

Here’s an example of a map in which we enable the scale control and disable the zoom control:

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

• Line 5: We set the zoomControl to false, which disables and hides the zoom control from the map.
• Line 6: We set the scaleControl to true, which renders the scale control on the map. The scale control can be found in the bottom-right section of the map, to the left of the “Terms of Use” button.

Customize map controls

Most UI controls are customizable, and the Google Maps API has several options to modify their functionality and appearance. When the map is first initialized, these control options can be found as fields inside the MapOptions object. Here are some examples of the map controls that can be customized with the following control options:

• The ZoomControlOptions control allows the modification options to display the zoom control. It has the following optional parameter:
  • The position parameter specifies the position of the zoom control on the map and is of type ControlPosition. By default, the zoom control is positioned in the bottom-right section of the map.
• The MapTypeControlOptions control allows the modification of options to display the map type control. It has the following optional parameters:
  • The mapTypeIds parameter specifies what map type options will be displayed on the map type control.
  • The position parameter specifies the position of the map type control on the map and is of type ControlPosition. By default, the map type control is positioned in the top-left section of the map.
  • The style parameter specifies the style of the map type control and is of type MapTypeControlStyle.
• The StreetViewControlOptions control allows the modification of options to display the Street View control. It has the following optional parameter:
  • The position parameter specifies the position of the Street View control on the map and is of type ControlPosition. By default, the Street View control is positioned in the bottom-right section of the map.
• The FullscreenControlOptions control allows the modification of options to display the fullscreen control. It has the following optional parameter:
  • The position parameter specifies the position of the fullscreen control on the map and is of type ControlPosition. By default, the fullscreen control is positioned in the top-right section of the map.
• The RotateControlOptions control allows the modification of options to display the rotate control. It has the following optional parameter:
  • The positon parameter specifies the position of the rotate control on the map and is of type ControlPosition.
• The ScaleControlOptions control allows the modification of options to display the scale control. It has the following optional parameter:
  • The style parameter specifies the style of the scale control and is of type ScaleControlStyle. However, as of this writing, the only style value available for ScaleControlStyle is the DEFAULT value.
• The gestureHandling parameter allows the modification of the behavior for pointer gestures and is of type string. It only takes one of the following constant string values:
  • With the cooperative string value, the map cooperates with the page where the map is embedded and allows a few gestures. In this gesture mode, one-finger gestures only scroll the page, while two-finger gestures zoom and pan the map.
  • With the greedy string value, all mouse scrolls and finger touch gestures can zoom or pan the map.
  • With the auto string value, the cooperative or greedy gesture mode is automatically chosen depending on the page settings.
  • With the none string value, all touch gestures and mouse scrolls are disabled by default.

None of the control options listed above have any required parameters.

By taking the map type control as an example and modifying it using the mapTypeControlOptions property, the map types above can be customized. Here’s the available set of options for the style of the map type control:

• The MapTypeControlStyle.HORIZONTAL_BAR option shows the map type control as a horizontal bar of buttons.
• The MapTypeControlStyle.DROPDOWN_MENU option shows the map type control as a dropdown menu of the map types to choose from.
• The MapTypeControlStyle.DEFAULT option sets the default appearance of the map type control.

The following code snippet shows how to set the style of the map type control as a dropdown menu:

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

Note: When modifying a specific map control’s options, the relevant MapOptions value must be set as true.

Although control options are usually configured when the map is first initalized, they can also be configured by passing the new configuration to the setOptions method.

Code example

Here’s an example of a map in which we modify the map type control to be displayed as a dropdown menu instead of a horizontal button bar:

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

• Lines 8–11: We define the mapTypeControlOptions options.
• Line 9: We set the style of the map type control as a drop-down menu using MapTypeControlStyle.DROPDOWN_MENU.
• Line 10: We assign all map types to the drop-down menu. If we want to avoid a particular map type from the drop-down menu, we remove that map type from the array we assign to the mapTypeIds parameter.