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

<br />

## Overview

To style the fill and stroke for a boundary polygon, use `FeatureStyleOptions`
to define style attributes, and set the `style` property on a feature layer to a
`google.maps.FeatureStyleFunction`, which contains styling logic.

The following example map demonstrates highlighting the boundary polygon for a
single region.


<iframe src="https://maps-docs-team.web.app/samples/boundaries-simple/dist/" allow="fullscreen; fullscreen"></iframe>

Apply style to boundary features by setting the `style` property to a
`google.maps.FeatureStyleFunction`, which can contain styling logic. The style
function is run over every feature in the affected feature layer, and is applied
at the time you set the style property. To update it, you must set the style
property again.

To uniformly style all features for a feature layer, set the `style` property to
a `google.maps.FeatureStyleOptions`. In this case, you don't need to use a
feature style function, since logic is not required.

The style function should always return consistent results when it is applied
over features. For example, if you wanted to randomly color a set of features,
the random part shouldn't take place in the feature style function, as that
would cause unintended results.

Because this function runs over every feature in a layer, optimization is
important. To avoid impacting rendering times:

- Enable only the layers you need.
- Set `style` to `null` when a layer is no longer in use.

To style a polygon in the locality feature layer, take the following steps:

1. If you haven't already done so, follow the steps in [Get Started](https://developers.google.com/maps/documentation/javascript/dds-boundaries/start.md.txt) to create a new map ID and map style. Be sure to enable the **Locality** feature layer.
2. Get a reference to the locality feature layer when the map initializes.


   ### TypeScript

   ```typescript
   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   ```

   ### JavaScript

   ```javascript
   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   ```

   <br />

3. Create a style definition of type `google.maps.FeatureStyleFunction`.

4. Set the `style` property on the feature layer to the `FeatureStyleFunction`.
   The following example shows defining a function to apply a style only to the
   `google.maps.Feature` with a matching place ID:


   ### TypeScript

   ```typescript
   // Define a style with purple fill and border.
   const featureStyleOptions: google.maps.FeatureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };

   // Apply the style to a single boundary.
   featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
       const feature = options.feature as google.maps.PlaceFeature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   ```

   ### JavaScript

   ```javascript
   // Define a style with purple fill and border.
   const featureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };

   // Apply the style to a single boundary.
   featureLayer.style = (options) => {
       const feature = options.feature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   ```

   <br />

If the specified place ID is not found, or does not
match the selected feature type, the style is not applied. For example,
attempting to style a `POSTAL_CODE` layer matching the place ID for "New York
City" would result in no style being applied.

## Remove styling from a layer

To remove styling from a layer, set the `style` to `null`:

```javascript
featureLayer.style = null;
```

## Look up place IDs to target features

To get place IDs for regions:

- [Use Places APIs and Geocoding](https://developers.google.com/maps/documentation/javascript/dds-boundaries/dds-use-maps-places-apis.md.txt#text-search) to search for regions by name, and get place IDs for regions within specified bounds.
- [Get data from click events](https://developers.google.com/maps/documentation/javascript/dds-boundaries/handle-events.md.txt). This returns the Feature corresponding to a region clicked, which provides access to its place ID, display name, and feature type category.

Coverage varies by region. See [Google boundaries coverage](https://developers.google.com/maps/documentation/javascript/dds-boundaries/coverage.md.txt) for details.

Geographic names are available from many sources, such as the
[USGS Board on Geographic Names](https://edits.nationalmap.gov/apps/gaz-domestic/public/search/names),
and the [U.S. Gazetteer Files](https://www.census.gov/geographies/reference-files/time-series/geo/gazetteer-files.html).

## Complete example code


### TypeScript

```typescript
let featureLayer: google.maps.FeatureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
```

### JavaScript

```javascript
let featureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
```

### CSS

```css
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
```

### HTML

```html
<html>
    <head>
        <title>Boundaries Simple</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
```

### Try Sample

[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/boundaries-simple/jsfiddle)

<br />