in this javascript I am attempting to draw a polyline on a Google Map but it gives an error - 'let streetLatitude;
let streetLongitude;
let marker; // Define marker globally to make it accessible across functions

function fetchStreetDetails(callback) {
  fetch("main.json")
    .then((response) => response.json())
    .then((jsonData) => {
      const entryCount = jsonData.length;
      const streetDetails = jsonData[0];

      // Extract details
      const FeatureID = streetDetails.FeatureID;
      streetLatitude = streetDetails.StreetLatitude;
      streetLongitude = streetDetails.StreetLongitude;
      const streetHeading = streetDetails.StreetHeading;
      const streetPitch = streetDetails.StreetPitch;
      const streetPanoID = streetDetails.StreetPanoID;
      const StreetPoints = streetDetails.Points;

      console.log("FeatureID: " + FeatureID);
      console.log("Street Latitude: " + streetLatitude);
      console.log("Street Longitude: " + streetLongitude);
      console.log("Street Heading: " + streetHeading);
      console.log("Street Pitch: " + streetPitch);
      console.log("Street PanoID: " + streetPanoID);
      console.log("Street Location: " + StreetPoints);

      // Update numberoffeeds div
      const numberoffeedsElement = document.getElementById("results");
      numberoffeedsElement.textContent = `This is a ${entryCount} round game.`;
      callback(FeatureID);
    })
    .catch((error) => console.error("Error fetching data: ", error));
}

fetchStreetDetails((fetchedFeatureID) => {
  const paintingDiv = document.getElementById("painting");
  const imageHTML =
    '<img src="https://www.tripgeo.com/Picture/p2r63q/' +
    fetchedFeatureID +
    '" onclick="this.requestFullscreen()">';
  paintingDiv.innerHTML = imageHTML;
});

function initMap() {
  const mapOptions = {
    center: { lat: 21.382325, lng: -8.170154652 },
    zoom: 3,
  };

  const map = new google.maps.Map(document.getElementById("map"), mapOptions);

  // Add a click event listener to the map
  const clickListener = map.addListener("click", (event) => {
    const clickLocation = event.latLng; // Get the latitude and longitude of the click

    // Create a new marker
     marker = new google.maps.Marker({
      position: clickLocation,
      map: map, // Set the map where the marker will be displayed
      draggable: true, // Set draggable to true
    });

    // (Optional) Add additional customization to the marker here,
    // such as setting an icon or info window

    // Remove the click event listener after adding the marker
    google.maps.event.removeListener(clickListener);
    // Add functionality after clicking the map
    createSubmitButton(clickLocation);
  });
}

// Function to create and add the button
function createSubmitButton(clickLocation) {
  const buttonsDiv = document.getElementById("buttons");
  if (!buttonsDiv) {
    console.error("Element with ID 'buttons' not found!");
    return;
  }

  const button = document.createElement("button");
  button.textContent = "Submit"; // Customize button text
  button.classList.add("button"); // Add class 'button'
  button.addEventListener("click", () => {
    // Handle button click event here (e.g., send clickLocation data)
    console.log(
      "Button clicked! Latitude:",
      clickLocation.lat(),
      "Longitude:",
      clickLocation.lng()
    );

    // Calculate distance between marker and StreetPoints
    const distanceInMeters =
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(streetLatitude, streetLongitude),
        clickLocation
      );
    const roundedDistanceInMeters = Math.floor(distanceInMeters); // Round down to the nearest meter
    console.log("Distance to StreetPoints: " + roundedDistanceInMeters + " meters");
    
    
     // Create a polyline between marker and StreetPoints
  const lineCoordinates = [
    { lat: streetLatitude, lng: streetLongitude },
    { lat: clickLocation.lat(), lng: clickLocation.lng() }
  ];

  const polyline = new google.maps.Polyline({
    path: lineCoordinates,
    geodesic: true,
    strokeColor: '#FF0000', // Line color
    strokeOpacity: 1.0,
    strokeWeight: 2 // Line thickness
  });

  // Set the polyline on the map
  drawPolyline(map);


  });

  buttonsDiv.appendChild(button);
}
// Function to draw polyline between marker and street location
  function drawPolyline(map) {
    const markerPosition = marker.getPosition(); // Get the current position of the marker
    const polyline = new google.maps.Polyline({
      path: [
        markerPosition.toJSON(),
        { lat: streetLatitude, lng: streetLongitude },
      ],
      strokeColor: "#FF0000", // red color
      strokeWeight: 2,
      map: map,
    });
     }'