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 need a map ID that uses the vector map. You'll also need to update your API bootstrap request. This section shows you how.

Create a new 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

Update your map initialization code

This requires the map ID you just created. It can be found on your 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'
});

Examples

Examples have been provided to demonstrate these features: