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

<br />

To use cloud-based maps styling on Android, you must use the latest renderer for Maps SDK for Android. [Follow these instructions](https://developers.google.com/maps/documentation/android-sdk/renderer.md.txt).

**Availability**: This feature is visible on Android, iOS, JavaScript, and
Maps Static.

Better tailor your map to the needs of your users by highlighting features
at the zoom level that the map is viewed at. For example, you can highlight
POIs or roads once viewers have zoomed into a particular location of interest.

You can style map feature elements to appear the same at all zoom levels on a
map, or for some elements, you can create different styles for different zoom
levels.

Not all features allow you to customize zoom levels. Map feature elements
that you can set zoom-level styling on have a diamond icon to the right.

![Diamond icon showing that zoom-level styling is available](https://developers.google.com/static/maps/images/cloud-customization/zoom-icon.png)

## Understand zoom-level styling

Zoom levels go from 0, the most zoomed out, showing the world, to 22, the
most zoomed in, showing a small detailed part of the map. A *keyzoom* is a
zoom level where you want to start a new style.

When you style map features at different zoom levels, that style applies to
all higher zoom levels (more zoomed in) until another zoom level style is
reached. Zoom level 0 is always added with the current style.

For example, if you set styles at zoom levels 5 and 10:

- The zoom level 5 style applies to zoom levels 5-9.
- The zoom level 10 style applies to zoom levels 10-22.
- Zoom levels 0-4 keep the current style.

When you customize a zoom-level style for a map feature, it overrides any
custom styles on the overall map feature.

> [!NOTE]
> **Note:** Very few map features are shown at all zoom levels. The styles you define are only applied at zoom levels where the map feature is visible.

### Understand zoom level transitions for 3D maps

When you tilt a 3D map and transition between zoom levels, you may see
transition colors outside of your set zoom-level styles.

For example, if you set the zoom-level styles as follows:

- For zoom level 10, water fill color = black.
- For zoom level 11, water fill color = white.

The water fill color may appear as gray when transitioning between the two zoom
levels, as shown in the following figure:

![Water fill color is black at zoom level 10, gray while transitioning to zoom level 11, and then white at zoom level 11](https://developers.google.com/static/maps/images/cloud-customization/zoom-level-transitions-with-tilt.svg)

## Customize different zoom levels

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

2. Create or open a map style, and select **Customize** .
   For details, see [Create a map style](https://developers.google.com/maps/documentation/android-sdk/cloud-customization/map-styles.md.txt#create-style).

3. From the **Map Features** panel, select a map feature to customize. The style panel
   opens showing the elements you can customize.

4. Next to the element to which you want to add zoom-level styling, select
   the zoom diamond to the right to open the keyzoom panel.

   ![Diamond icon showing that zoom-level styling is available](https://developers.google.com/static/maps/images/cloud-customization/zoom-icon.png)
5. Next to **Current Zoom**, select the zoom level you want to
   customize. The preview map adjusts to that zoom level.

   ![A menu that shows all the keyzoom styles and a selector for the current zoom level](https://developers.google.com/static/maps/images/cloud-customization/zoom-current.png)

   > [!NOTE]
   > **Note:** The keyzoom panel shows all the available default basemap color values for their respective keyzooms if the map feature has not yet been customized.

6. Select **Add Keyzoom** to add a new keyzoom at
   the selected zoom level and shows the respective default basemap value.

   ![A new zoom-level style for the current zoom level 12 appears in the keyzoom panel with its default basemap value.](https://developers.google.com/static/maps/images/cloud-customization/zoom-add.png)
7. Style this zoom level and any other zoom levels as needed.

   ![Set a new zoom level style](https://developers.google.com/static/maps/images/cloud-customization/zoom-new-style.png)

   > [!NOTE]
   > **Note:** Zoom-level styling applies to the selected zoom level and higher (more zoomed in). So, in this case, **Fill color** is black (the current style set for the element), from zoom level 12 to 22, blue from zoom levels 0 (the world) to 9, and a lighter blue from zoom levels 10 to 11.

8. To set another zoom level, change the **Current Zoom** and select
   **Add Keyzoom** again to add another zoom level to the list. Continue
   adding and setting zoom level styles until you are done.

9. When you're finished, close the keyzoom panel.

### Overwrite the default basemap color values for an element

To overwrite all default basemap color values for an element across zoom levels,
first style the element. When you add keyzooms, the keyzoom
uses the color you set for the element instead of the default basemap color.

### Save and publish zoom-level styling

1. To save your map styling changes, select **Save**.

2. To make your changes live for the map IDs associated with your map style,
   select **Publish**.

## Remove a zoom level style

1. From the **Map Features** panel, select a customized map feature.

2. Next to a style element, select the diamond on the right.
   Elements with custom zoom-level styling show a solid blue diamond.

   ![Visibility style element has a gray diamond icon with no fill. Fill color style element has a solid blue diamond, which indicates that there is custom zoom-level styling set.](https://developers.google.com/static/maps/images/cloud-customization/zoom-icon-set.png)
3. In the keyzoom panel, select the minus icon to
   delete a zoom level.

   ![To delete a zoom-level style, select the minus icon](https://developers.google.com/static/maps/images/cloud-customization/zoom-delete.png)

### Remove all zoom level styles

If you want to remove all custom styling from a map feature element, you can do one of the following:

- In the **style panel** , select the minus icon next to the element name.
- In the **keyzoom panel** , select the reset icon next to the element name.

## Preview road level details

You can preview enhanced road level details at zoom
levels 17+ on your existing styles such as realistic road widths, sidewalks,
lane markings and other features in select cities. You must enable the preview
for each style editor session. These road detail map features are only visible
on the SDKs or APIs that support road level details. To apply them in your app,
you must update the associated SDK or API to the version that supports road
level details. For more information about the API and SDK versions, see [Road
level details for Google Maps Platform](https://developers.google.com/maps/comms/msa-road-level-details).

To enable the road detail preview, do the following:

1. In the Google Cloud console, go to **Map Styles**.

2. Select an existing style or **Create a style**.

3. Click **Customize**.

4. In the style editor, click **Road detail preview**.

5. In the preview dialog, toggle **Road detail** to on.

For details on which road level details you can style, see [What you can style
on the map](https://developers.google.com/maps/documentation/android-sdk/cloud-customization/taxonomy).

### Add zoom level styles to soften style transition for zoom levels 17+

At zoom levels 17+ with road level details enabled, Road map features disappear
and become the Surface map feature instead. As you zoom in, any styled elements
that apply to the Surface map feature appear and replace the Road map features
and styles.

To make the transition between the map feature styles smoother, you can add zoom
level styles to lock in your style colors between specific zoom levels. You can
use zoom level styles to also control when to smoothly transition to a new style
color.

For example, at zoom level 16, the listed map features are styled as follows:

- Arterial is red.
- Highway is blue.
- Local is yellow.
- Surface is beige.

![A Seattle map at zoom level 16 where the roads are styled as red, blue, and
yellow.](https://developers.google.com/static/maps/images/cloud-customization/road-level-details-example-z16.png)

When you zoom in to zoom level 17, the arterials, highways, and local roads
change to the Surface map feature, which is styled as beige.

![The same Seattle map at zoom level 17 and all the roads are now a beige color
because they have switched to the Surface map
feature.](https://developers.google.com/static/maps/images/cloud-customization/road-level-details-example-z17.png)

To create a smoother transition between the Road map features and the Surface map feature, add the following keyzooms and zoom-level styling:

| Map feature | Zoom level 0 | Zoom level 12 | Zoom level 17 |
|---|---|---|---|
| Arterial | red | red | beige |
| Highway | blue | blue | beige |
| Local | yellow | yellow | beige |

After adding zoom-level styling, when you zoom in, the following occurs:

- The arterials, highways, and local roads display the custom styled color from zoom levels 0 to 12.
- After zoom level 12, the styled color begins to fade into the beige color until fully transitioning to the beige color from the Surface map feature style at zoom level 17.

![The same Seattle map but with zoom level styles added at 12 and 17 so that the
colors of the blue highway fade into the beige
surface.](https://developers.google.com/static/maps/images/cloud-customization/road-level-details-example-z16-style.png)

> [!CAUTION]
> **Caution:** This feature interpolation is not supported for raster, so you can only smooth style transitions for apps that are on mobile or use JavaScript vector maps.