RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/javascript/cloud-customization/tut-leg below:

Tutorial - Highlight a road network | Maps JavaScript API

Skip to main content Tutorial - Highlight a road network

Stay organized with collections Save and categorize content based on your preferences.

This tutorial walks you through the steps to create and use a map style that highlights the road network:

Create and publish a map style so it's available to use.
Create and connect a map ID that lets you use your style in apps and websites.
Add the map ID to your apps and websites so your apps use your map style.

Step 1: Create and publish a map style Open cloud-based maps styling

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.
Note: A solid dot appears next to the map feature to indicate it has a custom style.
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.

Note: The first time you save a map style, it is published automatically since it's the first version. When you subsequently update a map style, you can save changes as drafts as you go, and then publish when you're finished and want the style updated. 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.

Note: If you want to use your map style for different types of applications or websites, create a new map ID for each type, and then connect them all to the same map style.
At the bottom of the page, select Save. Your map ID is created.

Connect the map ID to your map style

Under Map style, select Change style next to Light.
Under Change light style, choose what map style to use for light mode in your apps, and select Done.
Repeat by selecting Change Style next to Dark and select a dark mode map style.
Note: If you don't select a dark style, or have not created any dark mode map styles, you can select the Google default dark map style.
Select Save. Your map ID is now associated with your map styles.

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.

For more information about adding a map ID, see Add the map ID to your map.

What's next

Here are some things you can try next:

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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-08-11 UTC.

[[["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-08-11 UTC."],[[["This tutorial demonstrates how to create and apply custom map styles, focusing on highlighting road networks, using Google Cloud's map styling tools."],["You'll learn to create and publish a style, connect it to a Map ID for use in apps and websites, and implement the Map ID within your projects."],["The tutorial covers adjusting road network colors and stroke widths, saving and publishing styles, and creating and linking Map IDs for seamless style integration across platforms."],["After completing the tutorial, you can further explore updating styles, testing updates, and leveraging the map feature hierarchy for efficient customization."]]],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4