Overview
You can style the fill and stroke for a boundary polygon by setting the style
property on a feature layer to a google.maps.FeatureStyleFunction
, which you
can use to define style attributes for color, opacity, and line weight.
To style a polygon, set the style
property to a
google.maps.FeatureStyleFunction
. The style function is where you define
logic to style individual polygons on a feature layer. When
featureLayer.style
is set, the style function is run over every feature in
the affected feature layer. The function is applied at the time you set the
style property. To update it, you must set the style property again.
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 should not 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
tonull
when a layer is no longer in use.
To style a polygon in the locality feature layer, take the following steps:
- If you haven't already done so, follow the steps in Get Started to create a new map ID and map style. Be sure to enable the Locality feature layer.
Get a reference to the locality feature layer when the map initializes.
featureLayer = map.getFeatureLayer("LOCALITY");
Create a style definition of type
google.maps.FeatureStyleFunction
.Set the
style
property on the feature layer to theFeatureStyleFunction
. The following example shows defining a function to apply a style only to thegoogle.maps.Feature
with a matching place ID:TypeScript
// Define a style with purple fill and border. //@ts-ignore 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. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } };
JavaScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } };
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
:
featureLayer.style = null;
Look up place IDs to target features
To get region data:
- Make a region lookup request to search for regions.
- Get data from click events (returns the Feature corresponding to a region clicked, and this provides access to its place ID, display name, and feature type category).
Use the Region coverage viewer to see available Google Boundaries for all supported regions.
Coverage varies by region. See Google boundaries coverage for details.
Geographic names are available from many sources, such as the USGS Board on Geographic Names, and the U.S. Gazetteer Files.
Complete example code
TypeScript
let map: google.maps.Map; //@ts-ignore let featureLayer; function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer('LOCALITY'); // Define a style with purple fill and border. //@ts-ignore 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. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } }; } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; //@ts-ignore let featureLayer; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 20.773, lng: -156.01 }, zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer("LOCALITY"); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } }; } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Boundaries Simple</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta" defer ></script> </body> </html>