Learn about modes and map types

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

To get started with custom styles, see Create a new style.

Understand light and dark modes

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

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

Choose light or dark mode when creating a style

You choose either light or dark mode when you create or copy a style. You can't change the mode of a style after creation.

You can check the style type in the style details page.

For step-by-step instructions on creating custom styles, see Create and use map styles.

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 you click the edit Edit icon to change a light mode style or dark mode style, the panel only displays your styles for that mode. To learn more, see Associate your style to a map ID.

Understand how custom styles apply to multiple map types

Google Maps Platform offers different map types to serve various use cases, including roadmap, terrain, hybrid, and navigation. The level of customization depends on whether the map is based on vector data (such as roadmap and navigation) or on raster imagery (such as hybrid and terrain).

Vector data maps

These maps use 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

These maps primarily use map imagery. 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.

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.

Map type definitions and mode support

The following table defines the map types and shows which map types support light and dark modes:

Map type	Description	Vector or raster	Mode support
roadmap	A standard map view that shows roads and major features.	Vector	Both
terrain	A map that emphasizes physical terrain features like mountains, rivers, and elevation.	Vector	Both
hybrid	A combination of satellite imagery and roadmap data, displaying street names and other key features overlaid on the imagery.	Raster	Light mode only
navigation	A specialized map type optimized for turn-by-turn guidance using the Navigation SDK.	Raster	Both

Notes on polygon styles for terrain and hybrid map types

When styling terrain and hybrid map types, you might see the following behaviors:

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

• Polygon styles might occlude underlying map elements on terrain and hybrid map types. For example, a stylized park polygon on a terrain map might hide subtle terrain features. On a hybrid map, it might hide the underlying satellite imagery.

Preview your styles on each map type

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

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

• Style editor: In the context panel, select the Map type drop-down list and change the map type. The map refreshes and displays the map type with your style applied.
• Map details page: In the Map preview section, you can switch between light and dark mode styles and change the variant in the drop-down list to different map types. You must associate your style to the map ID first before you can preview it.

Apply your custom styles to multiple map types

In the map details page, after you associate your light and dark mode styles to your map ID, click expand_moreShow more to choose whether to apply your custom styles to multiple map types. You can check once more how the style applies to the map types in the Map preview section.