Styling your map

This page shows how to customize your map and change the visual display of elements such as roads, parks, and buildings. Customize your map using the following tools:

  • Cloud-based tooling (Beta): Use Google Cloud console to create and manage map styles, and link them to your maps using Map IDs. You can create new styles by using the styling tool or import existing style definitions. Each time you update a style, your webpage will be automatically updated with the changes.

  • JSON style declarations: For every customization change to your map, use embedded JSON style declarations to manually define map styles. Changing these style declarations requires updating client-side code that uses the end user's device to perform operations and update your webpage.

Using Cloud-based tooling (Beta)

The following instructions show how to use the Google Cloud console to create, customize, publish, and manage your maps at any time using Map IDs and Map Styles.

To create or manage any Map IDs or Map Styles in your Google Cloud project, you must have the Project Owner or Project Editor IAM role.

Creating Map IDs

A Map ID is a unique identifier that represents a single instance of a Google Map. You can create Map IDs and update a style associated with a Map ID at any time in the Google Cloud Console without changing embedded JSON styling in your application code.

To create a Map ID:

  1. In the Cloud Console, go to the Maps Management page.

    Go to the Maps Management page

  2. Click Create New Map ID, to display the Create New Map ID form.

    Create New Map ID

    In the form, do the following:

    • Specify a map name.
    • Specify a map type or platform.
    • Enter a description of the map.
    • Click Next to display the new Map ID.

Creating Map Styles

A Map Style is a unique identifier for a set of customizations that can be associated with any Map ID.

To create a new style:

  1. In the Cloud Console, go to the Map Styles page.

    Go to the Map Styles page

  2. Click Create New Map Style to open the Create New Style page.

    Create Style Options

In the Create New Style page, you can do the following:

  • Select a Map Style from one of the available templates, or import existing JSON styling code by pasting your JSON code into the text box on the Import JSON tab.

    Import JSON

  • Apply styling to a map by selecting map names. A single map style can be applied to multiple maps. You can always change the Map Style associated with a Map ID later.

  • Customize the display of different map features by clicking the Customize in Style Editor button. In the Style Editor, you can:

    • Change the styling of features on a map, such as roads, bodies of water, and commercial corridors.
    • Filter points of interest to specific business types.
    • Specify the display of points of interest density.

    Customize Style

  • Create a name and description to Save and Publish the Map Style. If you associated a Map ID, saving and publishing will make the changes in style customizations for the associated maps public.

Updating style details

On the Map Styles page, you can select a map style to complete the following actions:

  • View style details.
  • Update Map IDs associated with a style.
  • Save style customizations in the style editor without making the changes publicly visible.
  • Publicly publish style customizations in the style editor.
  • Rename, duplicate, or delete a style.

Styles created before September 15, 2020 will not display Google Maps enhanced natural features. To use Google Maps enhanced natural features support for your map styling, you must create a Map Style.

Using embedded JSON style declarations

You can apply customized styling through an embedded JSON style declarations to the following:

  • Default map.
  • Map types that a user can switch between within a single map frame.

Specifying styles to features

To apply styles to different features and elements in a map, create an array of MapTypeStyle objects that define how the map should be styled.

The array takes the following form:

var stylesArray = [
  {
    featureType: '',
    elementType: '',
    stylers: [
      {color: ''},
      {visibility: ''},
      // Add any stylers you need.
    ]
  },
  {
    featureType: '',
    // Add the stylers you need.
  }
]

For a list of all available values for featureType, elementType, and stylers, see the JSON style reference.

Maps Platform Styling Wizard

Use the Maps Platform Styling Wizard as a quick way to generate a JSON styling object.

Applying styles to a default map

The following shows an example default map styled using light-colored text and icons on a dark background (i.e. dark mode). To see the code sample, go to Styled Maps - Night Mode code sample.

To modify the styles of the default map, set the map's styles property in the MapOptions object to your style array when:

  • Creating your map.
  • Or, when calling the Map.setOptions method.

Changes to labels and roads affect all map types including terrain, satellite, hybrid, and default roadmap types.

Apply styles to a map type

The following shows an added map type called Styled Map in the control at the top left of the map. To see the code sample, go to Styled Map Types.

To create a styled map type, set the style array to a StyledMapType object. Creating a new styled map type does not affect the style of the default map types.

What's next