Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/dds-boundaries/start.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/dds-boundaries/start.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/dds-boundaries/start.md.txt "View this page for the JavaScript platform docs.")

<br />

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

## Create a map ID

To create a new [map ID](https://developers.google.com/maps/documentation/get-map-id), follow the steps in
[Cloud customization](https://developers.google.com/maps/documentation/javascript/cloud-customization.md.txt).
Set the Map type to **JavaScript** , and select the **Vector** option.
Check **Tilt** and **Rotation** to enable tilt and rotation on the map. If
the use of tilt or heading adversely affects your app, leave **Tilt** and
**Rotation** un-checked so users cannot adjust them.

![Create Vector Map ID](https://developers.google.com/static/maps/documentation/maps-customization/images/vector-map-id.png)

## Create a new map style

To create a new map style, follow the instructions in
[Manage map styles](https://developers.google.com/maps/documentation/javascript/cloud-customization/map-styles-leg)
to create the style, and
[associate the style with the map ID you just created](https://developers.google.com/maps/documentation/javascript/cloud-customization/map-styles-leg#associate-style-with-map-id).

> [!WARNING]
> **Experimental:** This feature can only be set for light map styles. When you link a light map style that has this feature enabled to a [map
> ID](https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over), the enabled layers are also available for the dark map style.

## 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).

> [!IMPORTANT]
> **Important:** For optimal performance, only select the layers you need.

### To manage feature layers

1. In the Google API Console, [go to the Map Styles page](https://console.cloud.google.com/project/_/google/maps-apis/studio/styles).
2. Select a project if prompted.
3. Select a map style.
4. Click the **Feature layers** drop-down to add or remove layers.
5. Click **Save** to save your changes and make them available to your maps.

![A screenshot showing the drop-down.](https://developers.google.com/static/maps/documentation/javascript/dds-boundaries/feature_layer_dropdown.png)

## Update your map initialization code

This requires the map ID you just created. It can be found on your [Maps
Management](https://console.cloud.google.com/google/maps-apis/studio/maps) page.

> [!IMPORTANT]
> **Important:** Your map ID and API key must be associated with the same Google Cloud console project. Likewise, the map ID must be associated with a map style with one or more feature layers enabled.

1. Load the Maps JavaScript API by adding the inline bootstrap loader to your application code, as shown in the following snippet:

```javascript
<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>
```

> [!NOTE]
> **Note:** As the developer of a Maps JavaScript API application it is your responsibility to verify that your application complies with local laws by verifying that the correct region localization is applied for the country in which the application is hosted.

1. 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.

   ```javascript
   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.
   });
   ```

Learn more about [loading the Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/load-maps-js-api.md.txt).

## Add feature layers to a map

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

```javascript
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 for boundaries 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:

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

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});
```

## Next steps

- [Style a boundary polygon](https://developers.google.com/maps/documentation/javascript/dds-boundaries/style-polygon.md.txt)
- [Make a choropleth map](https://developers.google.com/maps/documentation/javascript/dds-boundaries/choropleth-map.md.txt)
- [Handle mouse events](https://developers.google.com/maps/documentation/javascript/dds-boundaries/handle-events.md.txt)
- [Get a place ID for a region](https://developers.google.com/maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis.md.txt#use-text-search)
- [Use the Geocoding and Places APIs with data-driven styling for boundaries](https://developers.google.com/maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis.md.txt)