Features in this document marked with thescience science icon are inPreview (Pre-GA).

This tutorial walks you through the steps to create and use a light mode mapstyle that highlights the road network:

1. Create and publish a map style so it's available to use.

2. Create and connect a map ID that lets you use your style inapps and websites.

3. Add the map ID to your apps and websites so your apps useyour map style.

Step 1: Create and publish a map style

Open cloud-based maps styling

1. Go to the Google Cloud console, and selectMap Styles. Select or create a project, if needed.

2. SelectCreate Style.

3. SelectLight.

4. At the bottom of the dialog, selectCustomize.

Style the Road network

1. UnderMap Features, expandInfrastructure, then selectRoadnetwork.

2. In the Road network style panel, underPolyline,thenFill color, select the color box.

3. Choose a bright color. Changing the color automatically checkstheFill color box.

   Note: A solid dot appears next to the map feature to indicate it hasa custom style.

4. UnderStroke width, set the stroke width to 5px.

5. On the map, zoom in and out to see the effect of your changes. Becauseyou 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

1. At the top right, selectSave.

2. InSave and publish map style, enter a name and, optionally, adescription for your map style.

3. SelectSave. Your map style is saved and published.

   

Note: The first time you save a map style, it is published automaticallysince it's the first version. When you subsequently update a map style, youcan save changes as drafts as you go, and then publish when you're finishedand 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 changesto the map style associated with a map ID, your style changesgo live when you publish, so no software or app updates are needed.

Create a map ID

1. In the Google Cloud console, selectMap Management.

2. At the top, selectCreate map ID.

   

3. Add a name for your map ID, and optionally, a description.

4. Select the map type for the map ID, depending on where you want to use yourmap style.

   

   Note: If you want to use your map style for different types of applicationsor websites, create a new map ID for each type, and then connect them all tothe same map style.

5. At the bottom of the page, selectSave. Your map ID is created.

Connect the map ID to your map style

1. UnderMap styles, selecteditChange Light mode style forLight mode.

   

2. UnderChange light style, choose what map style touse for light mode in your apps, and selectDone.

   

   Note: To assign a custom dark mode map style, first you mustcreate a newstyle and select Dark ormake acopy. If you don't select a dark style, or have notcreated any dark mode map styles, your app uses the Google default dark mapstyle.

3. SelectSave. 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 functionsas expected.

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

What's next

Here are some things you can try next:

• Update a style. To make changes to your map style and publish it, seeChange a style.

• scienceUnderstand how your styleapplies to different map types. For more information, seeLearn aboutmodes and map types.

• Test your map style updates. If you want to test your style changesbefore they go live, seeTest map style updates.

• Make styles that for specific zoom levels. For example, you cancustomize what specific map features look like when you are zoomed outcompared to when you zoom in to the map. For more information, seeStylezoom levels.

• Use the map feature hierarchy to efficiently get the styles you want.For example, you can style the high-level map featureNatural>Land, andall of the land map features under it inherit the styling. You can then docustom styling on just the child map features that you want to be different.For more information, seeUnderstand map style inheritance andhierarchy.