ZoomControl

The ZoomControl object is used to configure the Zoom control on the map.

The ZoomControl object lets you change the position of the zoom control.

See the Map Controls guide page for more information.

Example usage

const zoomControl = G.zoomControl({
    position: G.ControlPosition.LEFT_CENTER,
});

const map = G.map('map', {
    center: [40.7128, -74.0060],
    zoomControl: zoomControl,
});

Creating the ZoomControl object

G.zoomControl(options?: ZoomControlValue): ZoomControl

There are a few ways to setup the ZoomControl object.

Pass no value.

G.zoomControl(): ZoomControl

const control = G.zoomControl();
control.position = G.ControlPosition.LEFT_CENTER;

Pass a boolean value to disable the Zoom control.

G.zoomControl(value: boolean): ZoomControl

Parameter	Type	Required	Description
value	boolean	Yes	Whether to enable the Zoom control.

If you pass a false value to the zoomControl method then that will disable and hide the Zoom control when this is associated with a map.

const control = G.zoomControl(false);

Pass an object of options.

G.zoomControl(options: ZoomControlOptions): ZoomControl

Parameter	Type	Required	Description
options	ZoomControlOptions	Yes	The configuration options.

const zoomControl = G.zoomControl({
    position: G.ControlPosition.LEFT_CENTER,
});

Pass an existing ZoomControl object.

G.zoomControl(value: ZoomControl): ZoomControl

Parameter	Type	Required	Description
value	ZoomControl	Yes	The existing ZoomControl object.

const control = G.zoomControl(existingZoomControlObject);

Zoom Control options

Type ZoomControlOptions.

ZoomControlOptions is an object containing the configuration options for the ZoomControl object.

Option	Type	Default	Description
enabled	boolean	true	Whether the Zoom control is enabled and will display on the map.
position	ControlPosition	INLINE_END_BLOCK_END	The display position of the control.

Properties

Property	Type	Description
enabled	boolean	Whether the Zoom control is enabled and will display on the map.
position	ControlPosition	The display position of the control.

Methods

disable

disable(): ZoomControl

Disables and hides the Zoom control.

control.disable();

enable

enable(): ZoomControl

Enables and shows the Zoom control.

control.enable();

setPosition

setPosition(position: ControlPosition): ZoomControl

Set the display position of the control on the map.

Parameter	Type	Required	Description
position	ControlPosition	Yes	The display position of the control.

control.setPosition(G.ControlPosition.BLOCK_END_INLINE_START)

toGoogle

toGoogle(): Promise<google.maps.ZoomControlOptions>

Get the object to use to pass the ZoomControl options to the Google Map instance.

control.toGoogle().then((options) => {
    // Do something with the options
});