Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Customize 3D maps

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:

[フレーム]

asyncfunctioninit(){
const{Map3DElement}=awaitgoogle.maps.importLibrary('maps3d');
constmap=newMap3DElement({
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);
}
voidinit();index.js

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. 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 You must select "3D Hybrid" and use "light mode" in this step.

3 Associate your map style with a map Link your style 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.

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:

constmap3DElement=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:

constmap3DElement=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 isn't supported.
Map ID-enabled features like data-driven styling aren't supported.

Customize 3D maps Stay organized with collections Save and categorize content based on your preferences.

Overview

Update the map ID dynamically

Limitations

Customize 3D maps