Map color scheme
Stay organized with collections
Save and categorize content based on your preferences.
Page Summary
-
Roadmap and terrain map types allow customization of color schemes (light, dark, or system default) using
google.maps.colorScheme. -
The
colorSchemeoption must be set during map initialization and cannot be changed afterward. -
By default, maps use light mode; to change, import
ColorSchemeand specify the desired scheme (LIGHT, DARK, or FOLLOW_SYSTEM) within map options. -
Custom styles using Map IDs are only compatible with the light color scheme for roadmap map types.
For maps of type roadmap and terrain, you can set the map color scheme
(dark, light, or current system setting) by using google.maps.colorScheme. The
colorScheme option can only be set when the map is initialized; setting this
option after the map is created will have no effect.
Roadmap
The following image shows the light mode and dark mode color schemes for the
roadmap type.
Two examples of the roadmap type map of Paris using the light mode and dark mode color schemes.
Terrain
The following image shows the light mode and dark mode color schemes for the
terrain type.
Two examples of the terrain type map using the light mode and dark mode color schemes.
By default, the map uses light mode. When creating the map, import ColorScheme
and specify the map color scheme (LIGHT, DARK, or FOLLOW_SYSTEM) in
map options, as shown here.
const{ColorScheme}=awaitgoogle.maps.importLibrary("core")
constmapOptions={
center:{lat:-34.397,lng:150.644},
zoom:8,
colorScheme:ColorScheme.DARK,
}
map=newgoogle.maps.Map(document.getElementById('map_canvas'),mapOptions);
If you reset the options after the map is instantiated, colorScheme has no
effect.
To create custom light styles and dark styles for your roadmap map types, use cloud-based maps styling.