Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/style-reference.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/style-reference.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/style-reference.md.txt "View this page for the JavaScript platform docs.")

With style options you can customize the presentation of the standard Google
map styles, changing the visual display of features like roads, parks,
businesses, and other points of interest. As well as changing the style of
these features, you can hide features entirely. This means that you can
emphasize particular components of the map or make the map complement the
style of the surrounding page.

> [!IMPORTANT]
> If you want to update the same style across multiple apps, look into [cloud customization](https://developers.google.com/maps/documentation/javascript/cloud-customization.md.txt), which is available in the Google Cloud console and requires a [map ID](https://developers.google.com/maps/documentation/get-map-id). To avoid potential conflicts, **do not combine** cloud customization and hardcoded styling in the same app.

> [!NOTE]
> For a more comprehensive styling experience, you can instead use [JSON styling with cloud-based maps styling](https://developers.google.com/maps/documentation/javascript/cloud-customization/json.md.txt), which offers a more extensive list of map features and greater customization options. The cloud-based maps styling JSON schema is not backward compatible with embedded JSON style declarations. This means that cloud-based maps styling JSON cannot be used directly in the Maps JavaScript API. However, you can import embedded JSON style declarations into the cloud-based maps styling JSON schema.

## Examples

The following JSON style declaration turns all map features to gray, and
then colors arterial road geometry in blue, and hides landscape labels
completely:

```javascript
[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]
```

To apply a JSON style declaration to a map, pass the style array to the
[`MapOptions.styles`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#MapOptions.styles)
property when creating the map or calling
[`Map.setOptions()`](https://developers.google.com/maps/documentation/javascript/reference/map.md.txt#Map.setOptions).
For a complete example showing how to use JSON styling in an app, see
[Styled Map Selection](https://developers.google.com/maps/documentation/javascript/examples/style-selector.md.txt).

## The JSON object

A JSON style declaration consists of the following elements:

- **featureType** (optional) - the features to select for this style modification. Features are geographic characteristics on the map, including roads, parks, bodies of water, and more. If you don't specify a feature, all features are selected.
- **elementType** (optional) - the property of the specified feature to select. Elements are sub-parts of a feature, including labels and geometry. If you don't specify an element, all elements of the feature are selected.
- **stylers** - the rules to apply to the selected features and elements. Stylers indicate the color, visibility, and weight of the feature. You can apply one or more stylers to a feature.

To specify a style, you must combine a set of `featureType` and
`elementType` selectors and your `stylers` into a style
array. You can target any combination of features in a single array. However,
the number of styles that you can apply at once is limited. If your style
array exceeds the maximum number of characters, then no style is applied.

The rest of this page has more information about features, elements, and
stylers.

## `featureType`

The following JSON snippet selects all roads on the map:

```javascript
{
  "featureType": "road"
}
```

Features, or feature types, are geographic characteristics on the map,
including roads, parks, bodies of water, businesses, and more.

The features form a category tree, with `all`
as the root. If you don't specify a feature, all features are selected.
Specifying a feature of `all` has the same effect.

Some features contain child features you specify using a dot
notation. For example, `landscape.natural` or
`road.local`. If you specify only the parent feature, such as
`road`, the styles you specify for the parent apply to
all its children, such as `road.local` and
`road.highway`.

Note that parent features may include some elements that are not included
in all of their child features.

The following features are available:

- `all` (default) selects all features.
- `administrative` selects all administrative areas. Styling affects only the labels of administrative areas, not the geographical borders or fill.
  - `administrative.country` selects countries.
  - `administrative.land_parcel` selects land parcels.
  - `administrative.locality` selects localities.
  - `administrative.neighborhood` selects neighborhoods.
  - `administrative.province` selects provinces.
- `landscape` selects all landscapes.
  - `landscape.man_made` selects man-made features, such as buildings and other structures.
  - `landscape.natural` selects natural features, such as mountains, rivers, deserts, and glaciers.
  - `landscape.natural.landcover` selects land cover features, the physical material that covers the earth's surface, such as forests, grasslands, wetlands, and bare ground.
  - `landscape.natural.terrain` selects terrain features of a land surface, such as elevation, slope, and orientation.
- `poi` selects all points of interest.
  - `poi.attraction` selects tourist attractions.
  - `poi.business` selects businesses.
  - `poi.government` selects government buildings.
  - `poi.medical` selects emergency services, including hospitals, pharmacies, police, doctors, and others.
  - `poi.park` selects parks.
  - `poi.place_of_worship` selects places of worship, including churches, temples, mosques, and others.
  - `poi.school` selects schools.
  - `poi.sports_complex` selects sports complexes.
- `road` selects all roads.
  - `road.arterial` selects arterial roads.
  - `road.highway` selects highways.
  - `road.highway.controlled_access` selects highways with controlled access.
  - `road.local` selects local roads.
- `transit` selects all transit stations and lines.
  - `transit.line` selects transit lines.
  - `transit.station` selects all transit stations.
  - `transit.station.airport` selects airports.
  - `transit.station.bus` selects bus stops.
  - `transit.station.rail` selects rail stations.
- `water` selects bodies of water.

## `elementType`

The following JSON snippet selects the labels for all local roads:

```javascript
{
  "featureType": "road.local",
  "elementType": "labels"
}
```


Elements are subdivisions of a feature. A road, for example, consists of the graphical line (the
geometry) on the map, and also the text denoting its name (a label).


The following elements are available, but note that a specific feature may support none, some, or
all, of the elements:


Label text `fill` and `stroke` colors change based on the zoom level.
To make the experience consistent across zoom levels, always define both `fill`
and `stroke`.

- `all` (default) selects all elements of the specified feature.
- `geometry` selects all geometric elements of the specified feature.
  - `geometry.fill` selects only the fill of the feature's geometry.
  - `geometry.stroke` selects only the stroke of the feature's geometry.
- `labels` selects the textual labels associated with the specified feature.
  - `labels.icon` selects only the icon displayed within the feature's label.
  - `labels.text` selects only the text of the label.
  - `labels.text.fill` selects only the fill of the label. The fill of a label is typically rendered as a colored outline that surrounds the label text.
  - `labels.text.stroke` selects only the stroke of the label's text.

## `stylers`

Stylers are formatting options that you can apply to map features and
elements.

The following JSON snippet displays a feature as bright green, using an
RGB value:

```javascript
"stylers": [
  { "color": "#99FF33" }
]
```

This snippet removes all intensity from the color of a feature, regardless of
its starting color. The effect is to render the feature grayscale:

```javascript
"stylers": [
  { "saturation": -100 }
]
```

This snippet hides a feature completely:

```javascript
    "stylers": [
      { "visibility": "off" }
    ]
```

The following style options are supported:

- `hue` (an RGB hex string of format `#RRGGBB`) indicates the basic color.

  Note: This option sets the hue while keeping the saturation and lightness
  specified in the default Google style (or in other style options you
  define on the map). The resulting color is relative to the style of the
  base map. If Google makes any changes to the base map style, the changes
  affect your map's features styled with `hue`. It's better to
  use the absolute `color` styler if you can.
- `lightness` (a floating point value between `-100` and `100`) indicates the percentage change in brightness of the element. Negative values increase darkness (where -100 specifies black) while positive values increase brightness (where +100 specifies white).

  Note: This option sets the lightness while keeping the saturation and hue
  specified in the default Google style (or in other style options you
  define on the map). The resulting color is relative to the style of the
  base map. If Google makes any changes to the base map style, the changes
  affect your map's features styled with `lightness`. It's better
  to use the absolute `color` styler if you can.
- `saturation` (a floating point value between `-100` and `100`) indicates the percentage change in intensity of the basic color to apply to the element.

  Note: This option sets the saturation while keeping the hue and lightness
  specified in the default Google style (or in other style options you
  define on the map). The resulting color is relative to the style of the
  base map. If Google makes any changes to the base map style, the changes
  affect your map's features styled with `saturation`. It's
  better to use the absolute `color` styler if you can.
- `gamma` (a floating point value between `0.01` and `10.0`, where `1.0` applies no correction) indicates the amount of gamma correction to apply to the element. Gamma corrections modify the lightness of colors in a non-linear fashion, while not affecting white or black values. Gamma correction is typically used to modify the contrast of multiple elements. For example, you can modify the gamma to increase or decrease the contrast between the edges and interiors of elements.

  Note: This option adjusts the lightness relative to the default Google
  style, using a gamma curve. If Google makes any changes to the base map
  style, the changes affect your map's features styled with
  `gamma`. It's better to use the absolute `color`
  styler if you can.
- `invert_lightness` (if `true`) inverts the existing lightness. This is useful, for example, for quickly switching to a darker map with white text.

  Note: This option simply inverts the default Google style. If Google
  makes any changes to the base map style, the changes affect your map's
  features styled with `invert_lightness`. It's
  better to use the absolute `color` styler if you can.
- `visibility` (`on`, `off`, or `simplified`) indicates whether and how the element appears on the map. A `simplified` visibility removes some style features from the affected features; roads, for example, are simplified into thinner lines without outlines, while parks lose their label text but retain the label icon.
- `color` (an RGB hex string of format `#RRGGBB`) sets the color of the feature.
- `weight` (an integer value, greater than or equal to zero) sets the weight of the feature, in pixels. Setting the weight to a high value may result in clipping near tile borders.

Style rules are applied in the order that you specify. Do not combine
multiple operations into a single style operation. Instead, define each
operation as a separate entry in the style array.

Note: Order is important, as some operations are not commutative. Features
and/or elements that are modified through style operations (usually) already
have existing styles. The operations act on those existing styles, if present.

## The hue, saturation, lightness model

> [!NOTE]
> **Note:** The effect of the hue, saturation, lightness, and gamma settings is relative to the style of the base map. If Google makes any changes to the base map style, the changes affect your map's features styled with these options. It's better to use the absolute `color` styler if you can.

Styled maps use the [hue,
saturation, lightness (HSL)](https://en.wikipedia.org/wiki/HSL_and_HSV) model to denote color within the styler
operations. *Hue* indicates the basic color, *saturation*
indicates the intensity of that color, and *lightness* indicates the
relative amount of white or black in the constituent color.

[Gamma
correction](https://en.wikipedia.org/wiki/Gamma_correction) modifies the lightness over the color space, generally
to increase or decrease contrast. Additionally, the HSL model defines color
within a coordinate space where `hue` indicates the orientation
within a color wheel, while saturation and lightness indicate amplitudes
along different axes. Hues are measured within an RGB color space,
which is similar to most RGB color spaces, except that shades of white and
black are absent.

![Hue, saturation, lightness model](https://developers.google.com/static/maps/documentation/images/hsl.png)

While `hue` takes an HTML hex color value, it only uses this value
to determine the basic color - that is, its orientation around the color
wheel, not its saturation or lightness, which are
indicated separately as percentage changes.

For example, you can define the hue for pure green as
`hue:0x00ff00` or `hue:0x000100`. Both hues are
identical. Both values point to pure green in the HSL color model.


![](https://developers.google.com/static/maps/documentation/images/colorwheel.png)

**An RGB Color Wheel**

RGB `hue` values which consist of equal parts red, green and blue
do not indicate a hue, because none of those values indicate an orientation in
the HSL coordinate space. Examples are "#000000" (black), "#FFFFFF" (white),
and all the pure shades of gray. To indicate black, white or gray, you must
remove all `saturation` (set the value to `-100`) and
adjust `lightness` instead.

Additionally, when modifying existing features which already have a color
scheme, changing a value such as `hue` does not change its existing
`saturation` or `lightness`.