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

async function initMap() {
    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',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
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.

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.