Style polyline data features

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

Read the documentation.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap;
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 Seattle Bridges
    const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);

    // Apply style to all features.
    datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Dataset ID for Seattle Bridges
    const datasetId = '2438ee30-5366-4e84-82b7-a0d4dd1893fa';
    const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    // Apply style to all features.
    datasetLayer.style = { strokeColor: 'green', strokeWeight: 4 };
}
initMap();
index.js

CSS

/* 
 * 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 polyline data feature</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></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]={});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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map
            center="47.59, -122.31"
            zoom="14"
            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>
</html>
index.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-polyline
  npm i
  npm start