In the else statement in this javascript I want to fit the mapbounds to the extent of all the streetDetails.Points fetched from the json file '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: 21.382325, lng: -8.170154652 },
          zoom: 3,
          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);
        }
        
        // Define the CSS animation style separately (outside the button creation)
document.head.insertAdjacentHTML(
  "beforeend",
  `
  <style>
    .nextButtonAnimation {
      animation: flip 1s ease-in-out 1 alternate forwards;
      perspective: 1000px; /* Set perspective for 3D effect */
    }

    @keyframes flip {
      0% { transform: rotateY(0deg); }
      50% { transform: rotateY(-180deg); }
      100% { transform: rotateY(0deg); }
    }
  </style>
`
);
        // 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";
              
              // Apply CSS animation class for easy management
nextButton.classList.add("nextButtonAnimation");
              
              // Add event listener for the new button (optional, if needed)
              nextButton.addEventListener("click", () => {
                // Create a LatLng object representing the new position
const newLatLng = new google.maps.LatLng(21.382325, -8.170154652);

// Set the map center and zoom level
map.setCenter(newLatLng);
map.setZoom(3);
                // 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);
        }
      }
    '