In this javascript why is the polyline not being added to the map when the submit button is pressed '      let streetLatitude; // Define streetLatitude globally
let streetLongitude; // Define streetLongitude globally

function fetchStreetDetails() {
  fetch("main.json")
    .then((response) => response.json())
    .then((data) => {
      const streetDetails = data[0];
      streetLatitude = streetDetails.StreetLatitude;
      streetLongitude = streetDetails.StreetLongitude;
      const streetHeading = streetDetails.StreetHeading;
      const streetPitch = streetDetails.StreetPitch;
      const streetPanoID = streetDetails.StreetPanoID;
      const StreetPoints = streetDetails.Points;

      const panorama = new google.maps.StreetViewPanorama(
        document.getElementById("streetview"),
        {
          position: { lat: streetLatitude, lng: streetLongitude },
          pano: streetPanoID,
          heading: streetHeading,
          pitch: streetPitch,
        }
      );

      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);
    })
    .catch((error) => console.error("Error fetching data: ", error));
}

fetchStreetDetails();

const startingLocation = { lat: 51.540073, lng: -0.010874 }; // London Aquatics Center coordinates

function initMap() {
  const zoom = 8;

  const map = new google.maps.Map(document.getElementById("map"), {
    center: startingLocation,
    zoom: zoom,
    mapId: "DEMO_MAP_ID",
  });

  // Function to add marker on click
  function addMarker(event) {
    const clickLocation = event.latLng;
    const marker = new google.maps.Marker({
      position: clickLocation,
      map: map,
      draggable: true, // Set draggable to true
    });

    // Calculate distance on marker add using Pythagorean theorem
    const distance = calculateDistance(
      clickLocation.lat(),
      clickLocation.lng(),
      streetLatitude,
      streetLongitude
    );
    console.log("Distance from marker to street: " + distance + " meters");

  
    // Add functionality after clicking the map
    createSubmitButton(distance);
  }

  // Create a function to add the submit button
  function createSubmitButton(distance, clickLocation) {
  const buttonsDiv = document.getElementById("buttons");

  // Check if the button already exists before creating a new one
  if (!document.getElementById("submit")) {
    const submitButton = document.createElement("button");
    submitButton.id = "submit";
    submitButton.textContent = `Submit`;

    // Add event listener for the submit button (you can define the functionality here)
    submitButton.addEventListener("click", () => {
      console.log("Submit button clicked! Distance:", distance);
      // Add your submit logic here
      const message = "You are " + distance + " meters from the correct location.";

      // Update the 'results' div using DOM manipulation
      const resultsDiv = document.getElementById("results");
      resultsDiv.textContent = message;
      
    

      // Call drawPolyline passing the clickLocation as argument
      drawPolyline(clickLocation);
    });

    buttonsDiv.appendChild(submitButton);
  }
}


    // Add click listener to the map
    map.addListener("click", addMarker);

  function calculateDistance(lat1, lng1, lat2, lng2) {
 const deltaLat = (lat2 - lat1) * Math.PI / 180;
 const deltaLng = (lng2 - lng1) * Math.PI / 180;

 const earthRadius = 6371e3; // meters

 const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2);
 const b =
  Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2);
 const c = 2 * Math.atan2(Math.sqrt(a + b), Math.sqrt(1 - a - b));

 // Calculate distance using Pythagorean theorem
 const distance = earthRadius * c;

 // Round the distance to nearest meter using Math.round()
 const roundedDistance = Math.round(distance);

 return roundedDistance;
}
     
     
    // Function to draw polyline between marker and street location
    function drawPolyline(clickLocation) {
  const polyline = new google.maps.Polyline({
   path: [clickLocation.toJSON(), { lat: streetLatitude, lng: streetLongitude }],
   strokeColor: "#FF0000", // red color
   strokeWeight: 2,
   map: map,
  });
 }
 
   }
'