In this button when the 'next' button is pressed the user can't click on the map to add a marker even though I call ' map.addListener(clickListener);' - 'let map; // Declare map globally
let streetLatitude;
let streetLongitude;
let marker; // Define marker globally to make it accessible across functions
let totalScore = 0; // Initialize total points variable
let possibleScore = 0; // Initialize total points variable
let imageIndex = 0; // Initialize image index
let PictureURL; // Define PictureURL at a higher scope level
let clickListener; // Store the click listener reference


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

      // Check if there are more images to display
      if (imageIndex >= entryCount) {
        console.log("No more images to display!");
        return;
      }

      const streetDetails = jsonData.Features[imageIndex]; // Get image data based on index
      // Extract PictureURL at a higher scope level
      PictureURL = streetDetails.PictureURL;

      // 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("PictureURL: " + PictureURL);
      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
      // Update numberoffeeds div
      const numberoffeedsElement = document.getElementById("results");
      numberoffeedsElement.textContent = `This is a ${entryCount} round game.\nClick on the map where you think this scene is.`;
      callback(FeatureID);
    })
    .catch((error) => console.error("Error fetching data: ", error));
}

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

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

  // Add a click event listener to the map
   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(map, clickLocation);
  });
}

//nextbutton
const nextButton = document.createElement("button");
nextButton.id = "nextButton";
nextButton.textContent = "Next"; // Customize button text as needed
nextButton.className = "nextbutton";

// Apply CSS animation class for easy management
nextButton.classList.add("nextButtonAnimation");

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

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

    // Get the current marker position when the button is pressed
    const markerPosition = marker.getPosition();

    // Calculate distance between marker and StreetPoints
    const distanceInMeters =
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(streetLatitude, streetLongitude),
        markerPosition
      );
    const roundedDistanceInMeters = Math.floor(distanceInMeters); // Round down to the nearest meter
    console.log(
      "Distance to StreetPoints: " + roundedDistanceInMeters + " meters"
    );

    // Adjust points based on distance
    let score = 5000 - roundedDistanceInMeters;
    if (score < 0) {
      score = 0;
    }

    totalScore += score; // Add current points to total
    possibleScore += 5000;

    const message = "You scored " + score + " points";

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

    // Create a polyline between marker and StreetPoints
    const lineCoordinates = [
      { lat: streetLatitude, lng: streetLongitude },
      { lat: markerPosition.lat(), lng: markerPosition.lng() },
    ];

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

    // Set the polyline on the map
    polyline.setMap(map);

    marker.setDraggable(false);
    // Replace the buttons
    buttonsDiv.replaceChild(nextButton, submitButton);
    // Set map bounds to encompass marker and polyline
    const bounds = new google.maps.LatLngBounds(); // Use google.maps here
    bounds.extend({ lat: streetLatitude, lng: streetLongitude });
    bounds.extend(polyline.getPath().getAt(1));
    map.fitBounds(bounds);
  });

  buttonsDiv.appendChild(submitButton);
}

fetchStreetDetails((fetchedFeatureID) => {
  updateImage(fetchedFeatureID, PictureURL);
});

// Function to update the image in the ‘painting’ div
function updateImage(FeatureID, PictureURL) {
  const paintingDiv = document.getElementById("painting");
  const imageHTML =
    '<img src="' +
    PictureURL +
    '" onclick="this.requestFullscreen()" style="width: 90%;" class="center">';
  console.log("Image URL:", imageHTML); // Log the image URL to the console
  paintingDiv.innerHTML = imageHTML;
}
// Add click event for the ‘Next’ button
nextButton.addEventListener("click", () => {
  // Increment the image index to fetch the next image
  imageIndex++;

  // Fetch the next image from the JSON file and update the painting div
  fetchStreetDetails((fetchedFeatureID) => {
    updateImage(fetchedFeatureID, PictureURL);
     // Create a LatLng object representing the new position
          const newLatLng = new google.maps.LatLng(21.382325, -8.170154652);
        map.setCenter(newLatLng);
        map.setZoom(3);
    const message = "Where do you think this scene is?";
    
       // Add click listener back to the map
  map.addListener(clickListener);


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