Map Style Editor overview

Learn your way around the Maps Style editor in the Google Cloud Console.

Map style customizations always take 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.

Map Style Editor page

The Map Style Editor page shows you all of your different styles and indicates those that have unpublished Drafts. This page also gives you the option to create a new style.

Main map style page

The main map style page shows you the name, description, and picture of a single style. From this page, you can customize, rename, duplicate, or delete a style, as well as associate map IDs with the particular style. A single style may have multiple map IDs associated with it (such as one for Android-platform apps, one for iOS-platform apps, one for web-based platform apps) but each map ID may only be associated with a single style.

Controls

When customizing any style, the primary style functions are at the top of the window, on the right side. Each control appears lighter grey to start, when the control is not usable, and appears darker blue when it is available.

A detail screenshot showing four controls in the Maps Styler style customization: Undo, Redo, Save, and Publish. In this screenshot, Undo and Save are in darker text and available for use, while Redo and Publish are in lighter grey text and unavailable for use.

The Undo control is available from the first change you make. The Redo control is available once you've undone your first action on a given style editing session. Both controls remain available until a style is explicitly saved, or until your Cloud Console session ends.

The Publish control is available after your first deliberate save.

Features and elements

Choosing a Feature Type from the leftmost edit pane opens the Element Type pane, showing the options for editing that particular feature. Most editable feature elements are the Geometry (the color and outline) and the Labels (the text and icon.)

Choosing one of the options on the Element Type pane opens the Stylers pane, showing the options for editing that particular element.

A screenshot of the three element editor panes in the Map Style editor. The Highway feature type is selected, as is the Stroke element type. The Customize across zooms box is checked, and the zoom slider shows two blue dots, indicating two customized zoom levels.

To remove styles for any given feature, uncheck all checkboxes on the Stylers pane for each element.

Zoom levels

The Stylers pane lets you apply different style change to different zoom levels. Learn to add some examples of different element styles at different zoom levels.

Many elements or styles to elements are only visible at certain zoom levels. For example, 3D buildings will not be visible when the viewer is zoomed out enough to see an entire metro area; and country-name text is not visible when the viewer is zoomed in enough to view local arterial roads. Styling on roads will only be visible when the roads themselves are visible, and styling with an outline or texture will not be visible on any given road until the viewer is zoomed in close enough on the road in question.

Color selection

When selecting a color for an element, you can use the visual color picker or you can directly input RGB values, HSV values, or Hex codes.

A screenshot detail showing the color picker. A rectangular saturation and lightness selector is on top, followed by a smaller narrow hue chooser displaying the spectrum from red, purple, blue, green, yellow, and orange. Below these are number fields for entering color values, and below that is a bar that lets users choose which types of values to enter: RGB, HSL, or HEX codes.

Style editor tips

  • Create a "style sandbox" where you can tweak and perfect an element's styles across all zoom levels before then duplicating the desired styles into a "working" map style.
  • When you first start using the Maps Style Editor, add element styling only to the top level Geometry, or style the fill and stroke - not both. The same thing goes for text: style the entire label from the topmost level Text or style the fill and stroke separately, but don't add styles to both. It is possible to style all levels of a given element, but it can get messier to manage, especially if you're styling both the fill and the stroke, or if you're adding multiple z-level stops.
  • Zoom in and out to see how your styles look at multiple zoom levels.