You can customize the look and feel of the 3D basemap using
cloud-based maps styling.

With cloud-based maps styling, you have control over the look and feel of
the map that you present to users. By controlling features such as the density
of points of interest (POIs), the removal of certain POI categories, and
modifying the fill or stroke of features, you can create a map experience
tailored to your users.

Cloud-based maps styling provides a no-code editing
experience in the Google Cloud console. Each custom style you
create is associated with a map ID; edits made to your style in the maps
console will appear in your application automatically.

The following example shows a map that uses a custom style to change the color
of recreation feature icons and text to orange:


<iframe src="https://maps-docs-team.web.app/samples/3d-map-styling/dist/" allow="fullscreen; "></iframe>


```javascript
async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();
```

<br />

## Overview

The process for customizing 3D maps using cloud-based maps styling is the
same as for 2D maps:

|---|---|---|
| 1 | **Create a map ID** | Create a [Map ID](https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over.md.txt). Map IDs are passed to your application to handle styling. You'll associate a custom style with this map ID in subsequent steps. |
| 2 | **Create a cloud-based map style** | Select "3D Roadmap" (supports light and dark mode) or "3D Hybrid" (supports light mode) in this step. |
| 3 | **Associate your map style with a map** | [Link your style](https://developers.google.com/maps/documentation/javascript/3d/get-started.md.txt) to the map ID you created in step one |
| 4 | **Add the map ID to your application** | Specify the map ID in your code using the `map-id` parameter. |
| 5 | **Publish the map ID** | Note that changes to your custom style are automatically incorporated into your application after publishing. |

For an in-depth look at creating map styles, review [Create and use map
styles](https://developers.google.com/maps/documentation/javascript/cloud-customization/map-styles).

> [!NOTE]
> **Note:** Preview capabilities for 3D cloud-based maps styling aren't available. When creating a 3D style, select the "roadmap" or "2D hybrid" option in the Google Cloud console to preview your style.

### Update the map ID dynamically

You can update the `mapId` property dynamically after the map is instantiated.
This allows you to apply a different cloud-based map style without needing to
recreate the entire `Map3DElement` instance.

To update the map ID, set the `mapId` property on the `Map3DElement` instance:

```javascript
const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';
```

Because the mapId property reflects back to the HTML attribute, you can also
update it dynamically by modifying the attribute:

```javascript
const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');
```

## Limitations

There are certain limitations to be aware of when using
cloud-based maps styling with 3D Maps in Maps JavaScript:

- Dark mode is only supported in `ROADMAP` mode (`HYBRID` and `SATELLITE` modes don't support dark mode).
- Map ID-enabled features like data-driven styling aren't supported.