index.js

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
// [START maps_dds_datasets_polygon]
let map;
// [START maps_dds_datasets_polygon_featurestyleoptions]
const styleOptions = {
  strokeColor: "green",
  strokeWeight: 2,
  strokeOpacity: 1,
  fillColor: "green",
  fillOpacity: 0.3,
};

// [END maps_dds_datasets_polygon_featurestyleoptions]
async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { LatLng } = await google.maps.importLibrary("core");
  const position = new LatLng(40.757815, -73.933123);
  const map = new Map(document.getElementById("map"), {
    zoom: 11,
    center: position,
    mapId: "b98e588c46685dd7",
    mapTypeControl: false,
  });
  // Dataset ID for NYC park data.
  const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f";
  //@ts-ignore
  // [START maps_dds_datasets_polygon_featurelayer]
  const datasetLayer = map.getDatasetFeatureLayer(datasetId);

  datasetLayer.style = styleOptions;

  // [END maps_dds_datasets_polygon_featurelayer]
  // [START maps_dds_datasets_polygon_attribution_div]
  // Create an attribution DIV and add the attribution to the map.
  const attributionDiv = document.createElement("div");
  const attributionControl = createAttribution(map);

  attributionDiv.appendChild(attributionControl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
  // [END maps_dds_datasets_polygon_attribution_div]
}

// Create a custom control to hold attribution text.
// [START maps_dds_datasets_polygon_attribution_control]
function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}

// [END maps_dds_datasets_polygon_attribution_control]
initMap();
// [END maps_dds_datasets_polygon]