in this javascript I want to display the scores awarded for each street view in the 'streetview' div when there are no more street views to be displayed in the form 'Street View 1 = score <br> Street View 2 = score <br> etc Total Score = totalScore' - 'let streetLatitude; // Define streetLatitude globally
let streetLongitude; // Define streetLongitude globally
let marker; // Define marker globally to make it accessible across functions
let data; // Declare data globally
let currentIndex = 0; // Initialize index globally
let totalScore = 0; // Initialize total points variable

function fetchStreetDetails() {
 fetch("main.json")
  .then((response) => response.json())
  .then((jsonData) => {
   data = jsonData; // Store the data globally
   const entryCount = data.length; // data is already an array of objects
   const streetDetails = data[0];
   // Extract street details
   streetLatitude = streetDetails.StreetLatitude;
   streetLongitude = streetDetails.StreetLongitude;
   streetHeading = streetDetails.StreetHeading;
   streetPitch = streetDetails.StreetPitch;
   streetPanoID = streetDetails.StreetPanoID;
   const StreetPoints = streetDetails.Points;

   const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("streetview"),
    {
     position: { lat: streetLatitude, lng: streetLongitude },
     addressControl: false,
     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);

   // Update numberoffeeds div
   const numberoffeedsElement = document.getElementById("numberoffeeds");
   numberoffeedsElement.textContent = `There are ${entryCount} questions in this game.`;
  })
  .catch((error) => console.error("Error fetching data: ", error));
}

fetchStreetDetails();
function initMap() {
 const mapStyles = [
  {
   featureType: "poi",

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

  {
   featureType: "poi.park",

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

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

 const mapOptions = {
  center: { lat: 51.540073, lng: -0.010874 },
  zoom: 8,
  styles: mapStyles,
 };

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

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

  // Remove the click listener after adding a marker
  google.maps.event.removeListener(clickListener);

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

 // 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`;
   submitButton.className = "button";

   // Add event listener for the submit button (you can define the functionality here)
   submitButton.addEventListener("click", () => {
    console.log("Submit button clicked!");

    // Create the new button
    const nextButton = document.createElement("button");
    nextButton.id = "nextButton";
    nextButton.textContent = "Next"; // Customize button text as needed
    nextButton.className = "nextbutton";
    // Add event listener for the new button (optional, if needed)
    nextButton.addEventListener("click", () => {
     // Handle ‘nextButton’ click here
     console.log("Next button clicked!");
     buttons.removeChild(nextButton);

     const wheremessage = "Next location. Where is this?";

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

     // Check if there is next entry in the data
     if (data && currentIndex < data.length - 1) {
      currentIndex++; // Update the index to get the next street view details
      const nextStreetDetails = data[currentIndex];
      streetLatitude = nextStreetDetails.StreetLatitude;
      streetLongitude = nextStreetDetails.StreetLongitude;
      streetHeading = nextStreetDetails.StreetHeading;
      streetPitch = nextStreetDetails.StreetPitch;
      streetPanoID = nextStreetDetails.StreetPanoID;
      const StreetPoints = nextStreetDetails.Points;

      const panorama = new google.maps.StreetViewPanorama(
       document.getElementById("streetview"),
       {
        position: { lat: streetLatitude, lng: streetLongitude },
        addressControl: false,
        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);

      // Add click listener to the map to allow marker placement
      const nextClickListener = map.addListener("click", addMarker);
     } else {
      console.log("No next entry in the data.");
      // Calculate total points
      const finalScores = `Total Score: ${totalScore}`;

      // Update the 'streetview' div with final scores
      const streetviewDiv = document.getElementById("streetview");
      streetviewDiv.innerHTML = finalScores; // Update content with innerHTML

      const overmessage = "Game Over";
      const resultsDiv = document.getElementById("results");
      resultsDiv.textContent = overmessage;
     }
    });

    // Replace the buttons
    buttonsDiv.replaceChild(nextButton, submitButton);

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

    // Calculate distance using marker position and street coordinates
    const distance = calculateDistance(
     markerPosition.lat(),
     markerPosition.lng(),
     streetLatitude,
     streetLongitude
    );
    // Adjust points based on distance
    let score = 5000 - distance;
    if (score < 0) {
     score = 0;
    }
    console.log(
     "Distance from marker to street: " +
      distance +
      " meters. You scored: " +
      score
    );

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

    const message = "You scored " + score;

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

    // Createpolyline on marker add
    drawPolyline(clickLocation);
    // Set the marker as non-draggable
    marker.setDraggable(false);
   });

   buttonsDiv.appendChild(submitButton);
  }
 } // Add click listener to the map

 const clickListener = 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() {
  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,
  });
  // Set map bounds to encompass marker and polyline
  const bounds = new google.maps.LatLngBounds(); // Use google.maps here
  bounds.extend(markerPosition);
  bounds.extend(polyline.getPath().getAt(1));
  map.fitBounds(bounds);
 }
}
'