Overview

Welcome to the Maps JavaScript API WebGL beta! This release introduces new WebGL features for the Maps JavaScript API, which adds the following capabilities for vector maps:

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.

  1. Use v=beta in your API script tag. For example:

    <script
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap">
    </script>
  2. 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: