Get started

To use the Data-driven styling Preview, you must create a map ID that uses the JavaScript vector map. Next, you must create a new map style, select the desired boundary feature layers, and associate the style with your map ID.

If you plan to use the Region Lookup API, you must enable it in the Google API Console.

Enable the Region Lookup API

Create a map ID

To create a new map ID, follow the steps in Cloud customization. Set the Map type to JavaScript, and select the Vector option. Check Tilt and/or Rotation to enable tilt and rotation 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

Create a new map style

To create a new map style, follow the instructions in Manage map styles to create the style, and associate the style with the map ID you just created.

Select feature layers

In the Google API Console you can select which feature layers to display. This determines which kinds of boundaries will appear on the map (for example localities, states, and so on).

To manage feature layers

In the Google API Console, go to the Map Styles page.
Select a project if prompted.
Select a map style.
Click the Feature layers drop-down to add or remove layers.
Click Save to save your changes and make them available to your maps.

A screenshot showing the drop-down.

Update your map initialization code

This requires the map ID you just created. It can be found on your Maps Management page.

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

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap"></script>

(Optional) add the region parameter to set the map region. This alters your application to serve different map tiles based on the region and will also alter the polygons for certain boundary features. Learn more about region localization.
```
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=JP&libraries=places&v=beta&callback=initMap"></script>
```

Provide a map ID when you instantiate the map using the mapId property. This should be the map ID that you configured using a map style with feature layers enabled.

map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

Add feature layers to a map

To get a reference to a feature layer on your map, call map.getFeatureLayer() when the map initializes:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Check map capabilities

Data-driven styling requires capabilities which are enabled in the Google API Console, and associated with a map ID. Because map IDs are ephemeral and subject to change, you can call map.getMapCapabilities() to verify whether a certain capability (for example data-driven styling) is available prior to calling it. This check is optional.

The following example shows adding a listener to subscribe to map capability changes:

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (mapCapabilities.isDataDrivenStylingAvailable) {
    // Call data-driven styling here.
  } // When !mapCapabilities.isDataDrivenStylingAvailable, any existing featureLayers are also unavailable.
});