Map color scheme

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} = await google.maps.importLibrary("core")

const mapOptions = {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
  colorScheme: ColorScheme.DARK,
}
map = new google.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.