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.
Go to the Google Cloud console, and select Map Styles. Select or create a project, if needed.
Select Create Style.
At the bottom of the dialog, select Customize.
Style the Road network
Under Map Features, expand Infrastructure, then select Road
network.
On the panel that pops up on the right, under Polyline,
then Fill color, select the color box.
Choose a bright color. Changing the color automatically checks
the Fill color box.
Under Stroke width, set the stroke width to 5px.
On the map, zoom in and out to see the effect of your changes. Because
you selected a map feature that is relatively high in the hierarchy,
all road types underneath it have inherited your changes.
Save and publish your map style
At the top right, select Save.
In Save and publish map style, enter a name and, optionally, a
description for your map style.
Select Save. Your map style is saved and published.
Step 2: Create and connect a map ID
A map ID lets you use your map style on apps and websites. If you make changes
to the map style associated with a map ID, your style changes
go live when you publish, so no software or app updates are needed.
Create a map ID
In the Google Cloud console, select Map Management.
At the top, select Create map ID.
Add a name for your map ID, and optionally, a description.
Select the map type for the map ID, depending on where you want to use your
map style.
At the bottom of the page, select Save. Your map ID is created.
Connect the map ID to your map style
Under Associated map style, select the map style you created.
Select Save. Your map ID is now associated with your map style.
Step 3: Add the map ID to your apps or websites
Now that you have a map ID that is associated with a published map style,
you can add it to your apps or websites and test to make sure it functions
as expected.
Update a style. Make changes to your map style and publish it,
and see the changes show up automatically in your apps and websites. If you
want to test your changes before they go live, see
Test map style updates.
Use the map feature hierarchy to efficiently get the styles you want.
For example, you can style the high-level map feature Natural>Land,
and all of the land map features under it inherit the styling. You can
then do custom styling on just the child map features that you want to
be different.
[[["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-02-24 UTC."],[[["This tutorial explains how to create and apply custom map styles to highlight road networks using Google Cloud's map styling tools."],["You'll learn to create, publish, and connect a map ID to your custom style, enabling its use across various platforms like Android, iOS, JavaScript, and Web Service."],["The tutorial guides you through styling road networks by adjusting fill color and stroke width, impacting the visual representation of roads on your maps."],["Finally, you'll integrate the map ID into your applications and websites, ensuring your custom map style is reflected in your projects."]]],["This tutorial outlines how to create and implement a custom map style focused on highlighting the road network. Key actions include: 1) **Creating and publishing a map style** via the Google Cloud console, customizing the road network's color and stroke width. 2) **Creating and connecting a map ID** to the custom style, enabling the use of the style in apps and websites. 3) **Adding the map ID** to applications or websites, linking them to the unique style, and allowing to update the style.\n"]]