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', 
strokeWe
ight: 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',
 strokeW
eight: 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=&quo<t;./style.css" /
        script ><type=&q>uot;modul<e" src="./in>dex.js&qu<ot;/sc>rip>t
        !-- 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]?co<nsole>.warn<(p+&>quot; onl<y loads once. Ignoring:",g):d[l]=(f,...n)=r.add(f)u().then(()=d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5c>Lc8", v:< "weekly"});/script
    /head
    body
        g>mp-map
            center="47.59, -122.31"
   <    >     zoom<="1>4&quo<t;
  > <     >
    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-polyline
  npm i
  npm start