This product or feature is in Preview (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by theGoogle Maps Platform Service Specific Terms. For more information, see thelaunch stage descriptions.

This document describes the conceptual relationship between custom styles andlight and dark modes and defines the different map types and how to apply yourstyles to them.

To get started with custom styles, seeCreate a new style.

Understand light and dark modes

You can create two distinct styles for a single map ID: one optimized for lightbackgrounds and one for dark backgrounds. Maps for light backgrounds use adifferent base map than maps for dark backgrounds. Therefore, you cannot use onestyle for both modes.

The light and dark mode styles provide the best-suited styled map for differentenvironments. When you use the map ID in your applications, your app can loadthe appropriate style based on programmed behavior or the user's devicesettings.

Choose light or dark mode when creating a style

You choose either light or dark mode when you create orcopy astyle. You can't change the mode of a style aftercreation.

You can check the style type in thestyle details page.

For step-by-step instructions on creating custom styles, seeCreate and use mapstyles.

Associate one light mode style and one dark mode style to a map ID

A map ID supports only one light mode style and one dark mode style. When youclick theeditEdit icon to change alight mode style or dark mode style, the panel only displays your styles forthat mode. To learn more, seeAssociate your style to a mapID.

Understand how custom styles apply to multiple map types

Google Maps Platform offers different map types to serve various use cases,includingroadmap,terrain,2D hybrid,3D hybrid, andnavigation. Thelevel of customization depends on whether the map is based only on vector data(such asroadmap andnavigation), uses a mix of vector data and rasterimagery (such as2D hybrid andterrain), or uses a mix of raster imagery, 3Dpolygons, and vector imagery (such as3D hybrid).

Vector data maps

Theroadmap andnavigation map types use only vector data, which lets you comprehensively style most map features, including polygons for land and water, roads, landmarks, and points of interest.

Raster imagery maps

Theterrain,2D hybrid, and3D hybrid map types primarily use raster imagery with vector data overlaid on top. As a result, their styling capabilities are limited. You can usually only style vector data that you overlay on the imagery, such as labels, pins, and some polylines (that is, roads, borders). You cannot customize features that are part of the base imagery, such as the color of a lake or the appearance of a mountain range.

For example, the image shows the roadmap with a custom style of pink water. However, when you preview the style for terrain and hybrid map types, the water does not appear pink.

Note: For JavaScript apps using theterrain map type, you can apply custom styles to the base raster tiles. In this example image, the land and water appear pink.Show image.

Map type definitions and mode support

The following table defines the map types and shows which map types supportlight and dark modes.

Map type	Description	Base map imagery	Mode support
roadmap	A standard map view that shows roads and major features.	Vector	Both
navigation	A specialized map type optimized for turn-by-turn guidance usingthe Navigation SDK. For more information about navigation, see the customize mapstyles overview for theNavigation SDK for Androidand theNavigation SDK for iOS.	Vector	Both
terrain	A map that emphasizes physical terrain features like mountains,rivers, and elevation.	Raster	Both
2D hybrid	A combination of satellite imagery and roadmap data, displayingstreet names and other key features overlaid on the imagery.	Raster	Light mode only
3D hybrid	A photorealistic 3D map where you can style the visibility of points of interest labels, roads, and road signs. This map type is only available in 3D Maps in Maps JavaScript API.	Vector and raster	Light mode only

Style considerations for raster imagery maps

When stylingterrain,2D hybrid and3D hybrid map types, you might see thefollowing behaviors:

• When using custom styles on Android and iOS with theterrain map type, youmight notice the water temporarily flashing. This expected behavior occurswhen styling water because the roadmap tiles load after the terrain tiles.This delayed loading causes a brief visual conflict in custom colors.

• Polygon styles might occlude underlying map elements onterrainand2D hybrid map types. For example, a stylized park polygonon a terrain map might hide subtle terrain features. On a 2D hybrid map, itmight hide the underlying satellite imagery.

• For3D hybrid, road polylines might render underneath bridges or appearincorrectly around overpasses and underpasses.

• For3D hybrid map types, you cannot modify the map settings forcontrolling thedensity of points of interestand the style ofbuildings andlandmarks.

Preview your styles on each map type

After you create your custom styles, test them on the different map types to seehow they apply. This is especially important because not all styles apply acrossall map types.

In the Google Cloud console, you can preview your custom styles in the styleeditor or the map details page, as follows:

• Style editor: In thecontext panel, select theMap type drop-downlist and change the map type. The map refreshes and displays the map typewith your style applied.
• Map details page: In theMap preview section, you can switch betweenlight and dark mode styles and change the variant in the drop-down list todifferent map types. You must associate your style to the map ID firstbefore you can preview it.

Notes:

• Because theterrain map type uses a mix of raster and vector components, the preview map might not reflect all styling changes onterrain like it does with theroadmap map type.
• You cannot preview your custom styles for3D hybrid map types in the style editor and map details page.

Apply your custom styles to multiple map types

In the map details page, after youassociate your light and dark mode styles toyour map ID, clickexpand_moreShow more to choose whether toapply your custom styles to multiple map types. You can check once more how thestyle applies to the map types in theMap preview section.