in this javascript when the 'game over' message is displayed I want the map bounds to be set to fit all the markers that have been added to the map during the game - '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);
    }
   }
   '