Using the style editor

This page shows how to customize your map style using the style editor in the Google Cloud Console.

In the style editor, you can customize:

Customizations you add to your map style always takes priority over any updates Google may make to your map style, such as updates to the default style of an industry-optimized map or the Google base map.

Styling features

You can customize a feature's styling, such as a road's fill and outline color:

  1. Open the style editor by going to the Map Styles page in the Cloud Console, and either creating a map style or updating an existing map style:

    Go to the Map Styles page

  2. Select a feature to open up the Element type submenu.

    A style change to a parent feature also applies to its children. For example, by customizing the Road feature, customizations also apply to the Highway, Controlled access, Arterial, Local, Drivable, and Trail features.

  3. To customize an element's geometry that includes a feature's fill and outline, select the parent Geometry element that includes the Fill and Stroke child elements. This opens the Stylers submenu:

    • You can turn on/off the visibility of roads' geometries by selecting one of the following options:
      • Inherit: By default, a feature inherits its parent feature's customizations.
      • On: Overrides any inheritance and ensures that the feature is visible on the map.
      • Off: Overrides any inheritance and ensures the feature is hidden from the map.
    • Changing the color automatically selects the Color checkbox and applies your color customizations to the Geometry element and its child elements.
    • You can further edit the weight, saturation, or brightness of the element by moving the slider for that styler element.
  4. Complete the same workflow to override inherited behavior by specifying new style changes for a child element or child feature.

    For example, if you customize the Road parent feature yellow, that color customization applies to its children: Highway, Controlled access, Arterial, Local, Drivable, and Trail features. If you specify a pink color to the Arterial feature, highways, controlled access, local, drivable, and trails remain yellow while styling customizes arterial roads to pink.

Customizing at different zoom levels

You can customize the style of existing elements at different zoom levels when creating map styles with the style editor in Google Cloud Console.

For example, you can customize the color of water from pink at zoom level 0 to purple at zoom level 10, and associate other customizations with the level of detail you see at the specified zoom. To try out this feature in a sample app, see Map ID with styling.

To make style customizations at different zoom levels:

  1. Open the style editor in Cloud Console by visiting the Map Styles page, and either creating a Map Style or updating an existing Map Style:

    Go to the Map Styles page

  2. Select a feature in the Feature type submenu to open up the Element type submenu, and select an element you would like to customize.

  3. Check the Customize across zooms checkbox to make customizations at the current zoom level appear in the style editor.

    Once you select the Customize across zooms checkbox, you should see the following:

    • An Add stop: z checkbox that indicates your current zoom level and attaches customizations to the indicated zoom level.
    • A zoom slider bar to modify and select your zoom level. You can adjust zoom levels with map boolean zoom controls or arrow keys on your keyboard.
  4. When you make customizations in the Stylers submenu, the style editor automatically selects the Add stop: z checkbox, displays a blue dot above the slider, and overrides any inherited styles.

    The blue dot above your slider indicates that changes were made at the selected zoom level. To prevent changes from being saved at a particular zoom level, clear the Add stop: z checkbox (the blue dot turns gray to indicate that changes will not be saved at that level). After clearing the checkbox, the element returns to its inherited style.

    Any customizations you make at a zoom level will update the customizations at the indicated zoom levels and above. For example, customizations at zoom level 10 affect all customizations at zoom levels 10, 11, 12 and so on. The customizations override any inherited styles.

  5. To save your changes, click Save. To make your changes public on the map IDs associated with your map style, click Publish.

Saving and publishing your customizations

If you associate a map ID with your map style, saving and publishing in the style editor makes the style changes public for the associated maps. Saving style customizations without publishing in the style editor does not make the changes publicly visible.