MapTypeControl

The MapTypeControl object is used to configure the Map Type control on the map.

You can change the position, the map types to use, and the display of the map type control.

See the Map Controls guide page for more information.

Example usage

const mapTypeControl = G.mapTypeControl({
    mapTypeIds: [G.MapTypeId.ROADMAP, G.MapTypeId.TERRAIN],
    position: G.ControlPosition.TOP_CENTER,
    style: G.MapTypeControlStyle.DROPDOWN_MENU,
});

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

Creating the MapTypeControl object

G.mapTypeControl(options?: MapTypeControlValue): MapTypeControl

There are a few ways to setup the MapTypeControl object.

Pass no value.

G.mapTypeControl(): MapTypeControl

const control = G.mapTypeControl();
control.satellite = false;
control.position = G.ControlPosition.TOP_CENTER;

Pass a boolean value to disable the Map Type control.

G.mapTypeControl(value: boolean): MapTypeControl

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

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

const control = G.mapTypeControl(false);

Pass an object of options.

G.mapTypeControl(options: MapTypeControlOptions): MapTypeControl

Parameter	Type	Required	Description
options	MapTypeControlOptions	Yes	The configuration options.

const mapTypeControl = G.mapTypeControl({
    mapTypeIds: [G.MapTypeId.ROADMAP, G.MapTypeId.TERRAIN],
    position: G.ControlPosition.TOP_CENTER,
    style: G.MapTypeControlStyle.DROPDOWN_MENU,
});

Pass an existing MapTypeControl object.

G.mapTypeControl(value: MapTypeControl): MapTypeControl

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

const control = G.mapTypeControl(existingMapTypeControlObject);

Map Type Control options

Type MapTypeControlOptions.

MapTypeControlOptions is an object containing the configuration options for the MapTypeControl object.

Option	Type	Default	Description
enabled	boolean	true	Whether the Map Type control is enabled and will display on the map.
mapTypeIds	MapTypeId[]	[ROADMAP, SATELLITE, HYBRID, TERRAIN]	The map types to use.
position	ControlPosition	BLOCK_START_INLINE_START	The display position of the control.
style	MapTypeControlStyle	DEFAULT	The style of the control.

Properties

Property	Type	Description
enabled	boolean	Whether the Map Type control is enabled and will display on the map.
hybrid	boolean	Whether the hybrid map type is used.
position	ControlPosition	The display position of the control.
roadmap	boolean	Whether the roadmap map type is used.
satellite	boolean	Whether the satellite map type is used.
style	MapTypeControlStyle	The style of the control.
terrain	boolean	Whether the terrain map type is used.

The hybrid, roadmap, satellite, and terrain properties give you an alternate way to turn on and off individual map types.

// Turn the roadmap map type off
control.roadmap = false;

Methods

disable

disable(): MapTypeControl

Disables and hides the Map Type control.

control.disable();

enable

enable(): MapTypeControl

Enables and shows the Map Type control.

control.enable();

hasMapType

hasMapType(mapTypeId: MapTypeIdValue): boolean

Returns whether the passed map type is one of the map types that are enabled for the Map Type control.

Parameter	Type	Required	Description
mapTypeId	MapTypeId[]	Yes	One of the map type ids to test.

if (control.hasMapType(G.MapTypeId.HYBRID)) {
    // Do something
}

setMapTypeIds

setMapTypeIds(mapTypeIds: MapTypeId[]): MapTypeControl

Set the map type ids to include in the control.

Parameter	Type	Required	Description
mapTypeIds	MapTypeId[]	Yes	The map types to use.

control.setMapTypeIds([
    G.MapTypeId.HYBRID,
    G.MapTypeId.TERRAIN
]);

setPosition

setPosition(position: ControlPosition): MapTypeControl

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)

setStyle

setStyle(style: MapTypeControlStyleValue): MapTypeControl

Set the style of the control.

Parameter	Type	Required	Description
mapTypeIds	MapTypeControlStyle	Yes	The style of the control.

control.setStyle(G.MapTypeControlStyle.DROPDOWN_MENU);

toGoogle

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

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

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