Cloud-based maps styling now has a refreshed map style available for web and mobile. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. For more information, see New map style for Google Maps Platform. To start using the new map colors with cloud-based maps styling, see Update a map style to the latest version.
Here are some examples of complex element styling.
Yellow roads with green outlines
Customize all roads to have a pale yellow fill and a dark green outline as the
base style.
Under Map Features, select Road Network.
On the Road Network pane, under Polyline, select the box
under Fill color.
Select a light yellow color, such as hex code #eeeec8.
Select the box under Stroke color and select a dark green color, such
as hex code #155304.
Under Stroke width, set it to 3px.
As you zoom in and out, different roads show this style as they appear and
disappear. Once roads get too small to show the outline, they display only the
yellow color.
Different colors of water by zoom level
Some types of element styling might only be visible at certain zoom levels, like
3D buildings or points of interest (POIs). Add a style such that the
water appears dark blue zoomed out to maximum (z0),
medium blue when zoomed in to the level of a state or province (zoom level 6
on a laptop), and pale blue with a dark blue border when zoomed in tightly
(z19).
Under Map Features, select Water.
On the Water pane, under Polyline, select the box
under Fill color, and select a dark blue color.
Select the zoom diamond to the right of Fill color to open the
zoom-level styling pane.
Select zoom level 6, and select a medium blue color.
Select zoom level 19, and change the water to light blue.
Note, if you set a stroke color, creeks and streams and many smaller rivers
only show the body color, even zoomed all the way in. The difference between
stroke and fill is visible on large ponds, lakes, and larger bodies of water.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-01-29 UTC."],[[["This documentation provides guidance on customizing the visual style of map elements, such as roads and water bodies, using Cloud-based Map Styling."],["Users can learn to apply custom colors, outlines, and stroke widths to road networks based on zoom levels, creating unique map presentations."],["The examples demonstrate how to style water bodies with different colors based on zoom levels, showcasing the flexibility of map customization options."],["Users will understand how element styling, such as 3D buildings and POIs, might have visibility limitations based on zoom levels."],["This guide offers platform-specific instructions for implementing these customizations on Android, iOS, JavaScript, and Web Service platforms."]]],[]]