in this javascript in the 'submit' buttot event listener 'button.addEventListener("click", () => {
    // Handle button click event here (e.g., send clickLocation data)
    console.log("Button clicked! Latitude:", clickLocation.lat(), "Longitude:", clickLocation.lng());
  });' I want to calculate the distance between 'marker' and the StreetPoints from the first entry in the json file - '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;
      const streetLatitude = streetDetails.StreetLatitude;
      const 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
    const 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());
  });

  buttonsDiv.appendChild(button);
}
'