here is my javascript. It is not displaying the game over message when there are no more new entries in the json file - '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 Description;
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;
   Description = streetDetails.Description;
   // 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("Description: " + Description);
   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 mapStyles = [
  {
   featureType: "poi",

   stylers: [
    {
     visibility: "off",
    },
   ],
  },

  {
   featureType: "poi.park",

   stylers: [
    {
     visibility: "off",
    },
   ],
  },

  {
   featureType: "transit",
   stylers: [
    {
     visibility: "off",
    },
   ],
  },
 ];

 const mapOptions = {
  center: { lat: 21.382325, lng: -8.170154652 },
  zoom: 3,
  styles: mapStyles,
 };

 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 and description
function updateImage(FeatureID, PictureURL) {
 const infoDiv = document.getElementById("info");
 const infoHTML = Description;
 infoDiv.innerHTML = infoHTML;

 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;
}

// Fetch the next image from the JSON file and update the painting div
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) => {
  if (fetchedFeatureID) {
   // Check if a new image was fetched
   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 event listener back to the map
   google.maps.event.clearListeners(map, "click"); // Clear existing click listeners
   clickListener = map.addListener("click", (event) => {
    const clickLocation = event.latLng;
    // Create a new marker
    marker = new google.maps.Marker({
     position: clickLocation,
     map: map,
     draggable: true,
    });
    // Remove the click event listener after adding the marker
    google.maps.event.removeListener(clickListener);
    createSubmitButton(map, clickLocation);
   });

   // Update the 'results' div using DOM manipulation
   const resultsDiv = document.getElementById("results");
   resultsDiv.textContent = message;
  } else {
   // No more images to display
   const resultsDiv = document.getElementById("results");
   resultsDiv.textContent = "Game Over";
   // Optionally disable or remove the "Next" button here
   nextButton.disabled = true; // Disable the "Next" button
  }
 });

 const buttonsDiv = document.getElementById("buttons");
 buttonsDiv.removeChild(nextButton);
});
'