Announcement: New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see New map style for Google Maps Platform.

Overview

WebGL-powered features for Maps JavaScript API let you control tilt and rotation, add 3D objects directly to the map, and more. The following features are included:

WebGL Overlay View lets you add custom 2D and 3D graphics and animated content to your maps.
Tilt and heading can now be adjusted programmatically, and by using mouse and keyboard gestures.
map.moveCamera() lets you simultaneously change multiple camera properties.
Zoom now supports fractional values.

Get started

In order to use the new WebGL features, you must use a vector map. This section shows you how.

Specify the `renderingType` option

Use the renderingType option to specify either the raster or vector rendering type for your map (no map ID required):

Load the RenderingType library; this can be done when loading the Maps library:

const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

When initializing the map, use the renderingType option to specify either RenderingType.VECTOR or RenderingType.RASTER:

map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

The renderingType option overrides any rendering type settings made by configuring a map ID.

To enable tilt and rotation, set the tiltInteractionEnabled map option to true or call map.setTiltInteractionEnabled.
To enable panning, set the headingInteractionEnabled map option to true or call map.setHeadingInteractionEnabled.

Use a map ID to set rendering type

You can also specify the rendering type by using a map ID. To create a new map ID, follow the steps in Using Cloud-based Map Styling - Get a map ID. Be sure to set the Map type to JavaScript, and select the Vector option. Check Tilt and/or Rotation to enable tilt and rotation on the map. Doing so will allow you to programmatically adjust these values, and also lets users adjust tilt and heading directly on the map. If the use of tilt or heading will adversely affect your app, leave Tilt and Rotation un- checked so users will not be able to adjust tilt and rotation.

Create Vector Map ID

Next, update your map initialization code with the map ID you created. You can find your map IDs on the Maps Management page. Provide a map ID when you instantiate the map using the mapId property as shown here:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

Use the `<gmp-map>` element

Vector maps, tilt, and heading are enabled by default when using he <gmp-map> element, which lets you add a map to your page using HTML. Learn more.

Examples

Examples have been provided to demonstrate these features: