Style a Google Map any way you want

Tired of the default Google Maps look? This tutorial series walks you through how to style a Google Map and any datasets that you bring into it. By the end, you'll have full creative control over your map's appearance, moving beyond the standard interface to something that perfectly fits your brand and use case.

Part 1: Style a Google Map any way you want (this article)
Part 2: Apply styles for Google Maps using JSON style arrays
Part 3: Cloud based map styling for Google Maps
Part 4: Google Maps data driven styling for boundaries
Part 5: Style Google Maps with your own data using the Maps Datasets API

Three ways to style a Google Map

The default Google Map style (updated in March 2025) is a clean, bright, enterprise look built around a few core color choices:

• Land/landscape: light beige or off-white (#f5f5f5-ish)
• Water: light blue (#aadaff or similar)
• Roads: white for local streets, yellow/orange for highways, with darker outlines
• Parks and green spaces: light green (#DAF6E2)
• Buildings: light gray with subtle 3D extrusions at higher zoom levels

This works for most apps, but sticking with the defaults means your map looks like everyone else's. To give it some personality (or to hide map features such as restaurants and businesses that might clutter your map), you have three main options:

1. Use a JSON styles array,
2. Apply cloud based map styling in the Google Cloud Console or,
3. Switch between Google's built in map types, navigation options and controls.

Using a JSON styles array

My favorite way to style a Google Map is by passing in a JSON array of style rules directly in your code. Each rule targets a map feature (roads, water, landscape) element (geometry, labels) or styler (color, visibility, weight). For example, the JSON sample below keeps point of interest and place labels to a minimum:

[
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi.business",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

Its simple, easy to implement and you get immediate feedback about what elements have changed each time you refresh the map. There's also a wide variety of third party websites such as Snazzy Maps and Mapstyle (Google's own styling wizard) that provide pre-built JSON styles you can drop in or customize. These are useful starting points if you don't want to build from scratch.

Cloud based map styling

Cloud based map styling is Google's preferred way to style a Google Map. You create and manage styles in the Google Cloud Console, then reference them via a Map ID in your code.

This approach lets you reuse the same style across different apps and generally results in less verbose code because you don't have to deal with a bloated styles array. The downside is that each new style needs to be built from scratch which might take a while even with the help of the cloud based map styling UI.

Map type options

If you are happy with how the default base map looks but just want to change how information is displayed, you can switch between different base layers. The base Google Map object comes with 4 built in map types:

1. roadmap the default street map,
2. satellite satellite imagery or high resolution photos taken from planes,
3. hybrid satellite imagery with roads and labels,
4. terrain topographic features with contour lines

You can also change which map controls are displayed and where:

1. zoom
2. pan left, right, up, down
3. map mode toggle

This is done by altering appropriate control options fields within the MapOptions object upon creation of the map like so:

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});

What you'll learn in this tutorial series

In this tutorial series, I'll show you how to build a production Google Map with your own data and styling on it. Specifically, I'll explain:

• The difference between Cloud Based Map Styling (styling Google's base map) and data driven styling (styling features on top of it),
• How to use the Google Cloud Console to manage the relationship between maps, styles and datasets,
• How to import data into your map using either a manual upload or the (hardly ever used) Maps Datasets API,
• The basics of styling line, point and polygon datasets and,
• The difference between data driven styling for boundaries (which uses Google's built in boundary data) and data driven styling for datasets (where you upload your data to Google Cloud).

Each section is grounded in real, runnable code. You'll build a working example with real world datasets as you go.

👋 As always, if you have any questions or suggestions for me, please reach out or say hello on LinkedIn.

Next: Part 2: Apply styles for Google Maps using JSON style arrays (coming soon!)