Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/cloud-customization/tut.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/cloud-customization/tut.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/cloud-customization/tut.md.txt "View this page for the JavaScript platform docs.") [Web Service](https://developers.google.com/maps/documentation/maps-static/cloud-customization/tut.md.txt "View this page for the Web Service platform docs.")

<br />

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

1. **[Create and publish a map style](https://developers.google.com/maps/documentation/javascript/cloud-customization/tut.md.txt#tut1)** so it's available to use.

2. **[Create and connect a map ID](https://developers.google.com/maps/documentation/javascript/cloud-customization/tut.md.txt#tut2)** that lets you use your style in
   apps and websites.

3. **[Add the map ID to your apps and websites](https://developers.google.com/maps/documentation/javascript/cloud-customization/tut.md.txt#tut3)** so your apps use
   your map style.

## Step 1: Create and publish a map style

### Open cloud-based maps styling

1. Go to the Google Cloud console, and select [**Map Styles**](https://console.cloud.google.com/project/_/google/maps-apis/studio/styles). Select or create a project, if needed.

2. Select **Create Style**.

3. Select **Light**.

4. At the bottom of the dialog, select **Customize**.

### Style the Road network

1. Under **Map Features** , expand **Infrastructure** , then select **Road
   network**.

2. In the Road network style panel, under **Polyline** ,
   then **Fill color**, select the color box.

3. Choose a bright color. Changing the color automatically checks
   the **Fill color** box.

   > [!NOTE]
   > **Note:** A solid dot appears next to the map feature to indicate it has a custom style.

4. Under **Stroke width**, set the stroke width to 5px.

5. 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.

   ![Map style showing road network fill color changes](https://developers.google.com/static/maps/images/cloud-customization/tut-road-cust.png)

### Save and publish your map style

1. At the top right, select **Save**.

2. In **Save and publish map style**, enter a name and, optionally, a
   description for your map style.

3. Select **Save**. Your map style is saved and published.

   ![Save and publish page](https://developers.google.com/static/maps/images/cloud-customization/tut-save-pub.png)

> [!NOTE]
> **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

1. In the Google Cloud console, select **Map Management**.

2. At the top, select **Create map ID**.

   ![Create map ID button](https://developers.google.com/static/maps/images/cloud-customization/tut-create-mapid.png)
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 your
   map style.

   ![Select a map type on the map ID page](https://developers.google.com/static/maps/images/cloud-customization/tut-map-type.png)

   > [!NOTE]
   > **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.

5. At the bottom of the page, select **Save**. Your map ID is created.

### Connect the map ID to your map style

1. Under **Map styles** , select
   **Change Light mode style** for **Light mode**.

   ![Select map styles for your map ID](https://developers.google.com/static/maps/images/cloud-customization/choose-map-style-for-id.png)
2. Under **Change light style** , choose what map style to
   use for light mode in your apps, and select **Done**.

   ![Select a map style for light mode](https://developers.google.com/static/maps/images/cloud-customization/change-mapID-light-style.png)

   > [!NOTE]
   > **Note:** To assign a custom dark mode map style, first you must [create a new
   > style and select Dark](https://developers.google.com/maps/documentation/javascript/cloud-customization/map-styles#create-new-style) or [make a
   > copy](https://developers.google.com/maps/documentation/javascript/cloud-customization/map-styles#copy-style). If you don't select a dark style, or have not created any dark mode map styles, your app uses the Google default dark map style.

3. 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](https://developers.google.com/maps/documentation/get-map-id#add-a-map-id-to-your-app).

## What's next

Here are some things you can try next:

- **Update a style** . To make changes to your map style and publish it, see
  [Change a style](https://developers.google.com/maps/documentation/javascript/cloud-customization/map-styles.md.txt#update-style).

- **Understand how your style
  applies to different map types** . For more information, see [Learn about
  modes and map types](https://developers.google.com/maps/documentation/javascript/cloud-customization/modes-and-types).

- **Test your map style updates** . If you want to test your style changes
  before they go live, see [Test map style updates](https://developers.google.com/maps/documentation/javascript/cloud-customization/test-style-updates.md.txt).

- **Make styles that for specific zoom levels** . For example, you can
  customize what specific map features look like when you are zoomed out
  compared to when you zoom in to the map. For more information, see [Style
  zoom levels](https://developers.google.com/maps/documentation/javascript/cloud-customization/zoom-levels).

- **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.
  For more information, see [Understand map style inheritance and
  hierarchy](https://developers.google.com/maps/documentation/javascript/cloud-customization/map-hier).