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:

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:

<pre class="prettyprint notranslate lang-js">map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: '<var>MAP_ID</var>'
});</pre>

Examples

Examples have been provided to demonstrate these features: