// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;
let featureLayer: any;
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
function initMap(): void {
  // const bangalore = { lat: 12.97, lng: 77.59 };
  infoWindow = new google.maps.InfoWindow();
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position: GeolocationPosition) => {
        const pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        addMarker({ coords: { lat: pos.lat, lng: pos.lng } });
        function addMarker(props: any) {
          var marker = new google.maps.Marker({
            position: props.coords,
            map: map
          });
        }
        infoWindow.open(map);
        map.setCenter(pos);
      }
    );
  }

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 21,
      //  mapTypeId: "satellite",
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      heading: 320,
      tilt: 47.5,
      zoomControl: true,
      scaleControl: true,
      mapTypeControl: true,
      draggable: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain", "satellite", "hybrid"]
      },
      restriction: {
        latLngBounds: {
          north: 21.2705834,
          south: 21.0478169,
          west: 72.7013819,
          east: 72.9432106
        },
        strictBounds: true
      },
      mapId: "ce070ab72795128b" // <YOUR_MAP_ID_HERE>,
    }
  );
  if (map.getTilt()) {
    map.setTilt(45);
  }
  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event: any) => {
    // addMarker(event.latLng, map);
  });

  //   const transitLayer = new google.maps.TransitLayer();
  // transitLayer.setMap(map);
  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER]
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function(mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };

  const destinations: any = [];
  // console.log("destinations",destinations)
  destinations.push(new google.maps.LatLng(21.385038, 72.961));
  destinations.push(new google.maps.LatLng(21.11217, 72.583761));
  destinations.push(new google.maps.LatLng(21.014774, 72.813101));
  destinations.push(new google.maps.LatLng(21.112852, 73.111064));
  destinations.push(new google.maps.LatLng(21.387294, 72.9599));

  const PolylineOptions = {
    path: destinations,
    strokeColor: "#ff0000",
    strokeWeight: 10
  };
  const Polyline = new google.maps.Polyline(PolylineOptions);
  Polyline.setMap(map);

  map.data.setControls(["Polygon"]);
  map.data.setStyle({
    editable: true,
    draggable: true
  });
  bindDataLayerListeners(map.data);

  //load saved data
  loadPolygons(map);

  // Add a marker at the center of the map.
  //  addMarker(bangalore, map);
}
// Apply listeners to refresh the GeoJson display on a given data layer.

function bindDataLayerListeners(dataLayer: any) {
  dataLayer.addListener("addfeature", savePolygon);
  dataLayer.addListener("removefeature", savePolygon);
  dataLayer.addListener("setgeometry", savePolygon);
}

function loadPolygons(map: any) {
  var data = JSON.parse(localStorage.getItem("geoData") || "{}");
  map.data.forEach(function(f: any) {
    map.data.remove(f);
  });
  map.data.addGeoJson(data);
}

function savePolygon() {
  map.data.toGeoJson(function(json) {
    localStorage.setItem("geoData", JSON.stringify(json));
  });
}

// declare global {
interface Window {
  initMap: () => void;
}
// }
window.initMap = initMap;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Api</title>

    <link rel="stylesheet" href="/style.css">

</head>

<body>
    <h1>Google Maps</h1>

    <div id="map"></div>



    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTKJcm0tRhezPxUZe25iiPW5D_4hKKfEQ&callback=initMap">
</script>
    <script src="/app.tsx"></script>
</body>
</html>