Style polygon data features

This example shows an approach to styling polygon geometry based data features.

Read the documentation.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};

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

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

    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = styleOptions;
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = styleOptions;
}
initMap();
index.js

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;
}
#attribution {
  background-color: rgba(255, 255, 255, 0.7);
  font-family: "Roboto", "Arial", "sans-serif";
  font-size: 10px;
  padding: 2px;
  margin: 2px;
}
style.css

HTML

<html>
  <head>
    <title>Style a polygon data feature</title>

    <link rel="stylesheet" type="text/css" >href=<"./style.css" /
    script ><type=&q>uot;m<odule" src=">./ind<ex.js&>quo>t;/script
    !-- prettier-ignore --
    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]={});va>r d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=h||(h=new Promise(async(f,n)={await (a=m.cr>eateElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t="_&qu>ot;+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+" cou>ld not l&&oad."))>;a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a<)}));d[>l]?<conso>le.<warn>(p+&q<uot; only loads once. Ignoring:",g):d[l]=(f,...n)=r.add(f)u().then(()=d[l](f,...n))})
        >({key: <"AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: &q>uot;weekly"});/script<
  />head
<  body
 >   <gmp-m>a<p cen>
ter="
40.757815, -73.933123" zoom="11" map-id="5cd2c9ca1cf05670" map-type-control="false"
      div id="attribution" slot="control-block-end-inline-start"Data source: NYC Open Data/div
    /gmp-map
  /body
/htmlindex.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. 

  git clone https://github.com/googlemaps-samples/js-api-samples.git
  cd samples/dds-datasets-polygon
  npm i
  npm start