In this javascript '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 totalPoints = 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.");

          let individualScores = ""; // Initialize a string to store individual scores

          // Loop through data to create individual score strings
          for (let i = 0; i < data.length; i++) {
            const streetDetails = data[i];

            // Access points data based on your data structure
            let points;
            if (streetDetails.hasOwnProperty("Points")) { // Check if "Points" property exists
              points = streetDetails.Points;
            } else {
              points = 0; // Assign 0 points if "Points" property is missing
            }

            const streetPoints = `Street View ${i + 1} = ${points} <br>`;
            individualScores += streetPoints;
          }

          // Combine individual scores and total score
          const finalScores = `${individualScores} Total Score: ${totalPoints}`;

          // 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 points = 5000 - distance;
if (points < 0) {
    points = 0;
}
              console.log(
                "Distance from marker to street: " + distance + " meters. You scored: " + points
              );
              
               totalPoints += points; // Add current points to total

              const message =
                "You scored " + points;

              // 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);
        }
      }
    ' the ' resultsDiv.textContent = overmessage;' message is displaying the lat,lng location for each Street View. I want to display the points scored for each street view