A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.google.com/maps/documentation/maps-static/styling below:

Styled Maps | Maps Static API

Skip to main content Styled Maps

Stay organized with collections Save and categorize content based on your preferences.

Customize the presentation of the standard Google map by applying your own styles when using the Maps Static API. You can change the visual display of features such as roads, parks, built-up areas, and other points of interest. Change their color or style to emphasize particular content, complement surrounding content on the page, or even hide features completely.

If you want to update the same style across multiple apps, look into cloud customization, which is available in the Google Cloud console and requires a map ID. To avoid potential conflicts, do not combine cloud customization and hardcoded styling in the same app. Examples

The following example displays a map of Brooklyn, US, with styling to color the local roads bright green and the residential areas black. It also inverts the lightness of the labels, so that they stand out better against a dark background. Note that this working example uses URL encoding:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

The following example uses styling operations and simplifications to approximate the look of a US road atlas:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
Style syntax

To create a customized styled map, include one or more style parameters in the request URL.

Each style declaration may contain the following arguments, separated by pipe characters ("|"):

Note: the style declaration must specify the above arguments in the order stated. The following example gives the correct syntax for a feature and element selection with two rules:
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument
Features

The following style declaration colors all roads on the map:

style=feature:road|color:0xffffff

Here are some common feature selections:

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:

Elements

The following style declaration colors the labels for all local roads:

style=feature:road.local|element:labels|color:0xffffff

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 consistenent across zoom levels, always define both fill and stroke.

Style rules

Style rules are formatting options which are applied to the features and elements specified within each style declaration.

The following style declaration applies two style rules to the roads on the map. The first rule applies a color to the roads. The second rule simplifies the display of the roads, so they have thinner lines without outlines:

style=feature:road|color:0xffffff|visibility:simplified

Each style declaration must contain one or more operations separated using the pipe ("|") character. Each operation specifies its argument value using the colon (":") character, and all operations apply to the selection in the order in which you specify them.

The following style options are supported:

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: 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) 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 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.

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.

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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-14 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-14 UTC."],[[["Google Maps Static API can be customized by applying styles to alter the visual display of features like roads, parks, and points of interest."],["You can customize maps using hardcoded styling within the URL or by managing styles centrally in the Google Cloud console with map IDs."],["Styles are defined using the `style` parameter with arguments specifying feature, element, and style rules, controlling appearance with options like hue, lightness, saturation, and visibility."],["MapLibre GL JS utilizes the HSL color model for defining colors, where the `hue` component represents the base color orientation on a color wheel, accepting HTML hex color values but using them only for base color determination."]]],[]]


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4