Using the style editor

This page shows how to customize the style of map elements and features, using the style editor in the Google Cloud Console. In the style editor, you can customize styling for map features such as fill and outline color for map elements. You can control the visibility and density points of interest (POI), and apply styles by zoom level.

Your map style customizations 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.

Example

To run the ApiDemos sample app, see the GitHub sample (Java | Kotlin) and view the CloudBasedMapStylingActivity demo (Java | Kotlin).

Customizing styling for map 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.
  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, customizations to the Road feature, also apply to its child features: Highway, Controlled access, Arterial, Local, Drivable, and Trail.
  3. To customize a feature, select the parent Geometry element. This opens the Stylers submenu.
    • Changing the color automatically selects the Color checkbox and applies your color customizations to the Geometry element and its child elements.
    • Toggle the visibility of elements, by selecting one of the following options:
      • Inherit (default): Element inherits parent customizations.
      • On: Overrides any inheritance, ensuring that the element will always be visible on the map.
      • Off: Overrides any inheritance, ensuring that the element will always be hidden.
  4. Click Save to save your changes. Your changes will not apply to any maps until you click Publish.

Customizing by zoom level

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 make style customizations at different zoom levels:

  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.
  2. Select a feature to open up the Element type submenu, and select an element 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.