💅 Styles & Themes

Jozef Soročin — Google Developer Expert

Book a consultation ↗

8 min read • Updated 06/19/2026

2026 Update: Several styling features shipped since this chapter was last updated:

Dark mode via colorScheme : built-in light/dark/system-follow mode without needing separate Map IDs
Multi-mode cloud styling : a single Map ID now supports both light and dark styles
New Cloud Console features: POI pin customization, terrain/navigation/hybrid dark mode, 3D roadmap styling

You've probably seen many stylistic variations of Google Maps out there on the interwebs:

In this chapter we'll explore how to:

override the default landscape, water, and road colors
adjust the density of points of interest (POIs) to suit your business needs
reuse brand-specific map styles across multiple map instances.

Scenario

I'm running a chain of restaurants, each of which has its own URL and I'd like to:

Display a Google Map on each website.
Adjust the base map look & feel to fit my brand.
Hide the pins of my competitors' places + all other “irrelevant” POIs.

Which approach should I use? Cloud-based styling (via Map IDs) is the recommended approach for new projects. It lets you update styles across all your apps without code changes and supports dark mode. Inline JSON styling still works and isn't deprecated, but it lacks dark mode support and requires code deploys to change styles.

The old-school way (Inline JSON)

To override the basemap's color scheme in the old days, you had to resort to what's called JSON styling . For instance, if you wanted to set the water color to #7bb8f5 , you'd:

go to SnazzyMaps.com or Google's Styling Wizard and open the styling editor
find the corresponding water entry
set the hex color

export the JSON code

[
  {
    "featureType": "water",
    "stylers": [
      {
        "color": "#7bb8f5"
      }
    ]
  }
]

create a StyledMapType object

const cuteBlueOceansStyle = new google.maps.StyledMapType(
  // collapsed for brevity
  [{ featureType: "water", stylers: [{ color: "#7bb8f5" }] }],

  {
    name: "Map",
  },
);

initialize the map and assign your mapTypeIds

const map = new google.maps.Map(mapContainer, {
  center: position,
  zoom: 9,

  mapTypeControlOptions: {
    mapTypeIds: ["blueOceansMapStyleId", "hybrid"],
  },
});

and finally set the mapTypeId to apply the custom style

map.mapTypes.set("blueOceansMapStyleId", cuteBlueOceansStyle);
map.setMapTypeId("blueOceansMapStyleId");

Using a custom name in the StyledMapType also let you override the map type control:

Google Maps map type control showing custom Map label instead of default type names

This approach had a few downsides, though:

You had to copy & paste the JSON color config throughout your project(s).
If you wanted to update the style across multiple projects, you had to update them separately.
Cross-platform brand-aware maps were challenging to keep up to date as the brand evolved.
There was loads of repetitive boilerplate code etc.

Google realized this and moved maps customization to the cloud in 2020 , which brings us to…