in this javascript add a function in the nextButton click event to change the Street View using the parameters in the next entry of the json file if there is one (for using the street view parameters from example data[1]) - '  let streetLatitude; // Define streetLatitude globally
      let streetLongitude; // Define streetLongitude globally
      let marker; // Define marker globally to make it accessible across functions

      function fetchStreetDetails() {
        fetch("main.json")
          .then((response) => response.json())
          .then((data) => {
            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 },
                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
            // Update numberoffeeds div
            const numberoffeedsElement =
              document.getElementById("numberoffeeds");
            numberoffeedsElement.textContent = `There are ${entryCount} separate questions.`;
          })
          .catch((error) => console.error("Error fetching data: ", error));
      }

      fetchStreetDetails();

      const startingLocation = { lat: 51.540073, lng: -0.010874 }; // London Aquatics Center coordinates

      function initMap() {
        const zoom = 8;

        const map = new google.maps.Map(document.getElementById("map"), {
          center: startingLocation,
          zoom: zoom,
          mapId: "DEMO_MAP_ID",
        });

        // 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`;

            // 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

  // Add event listener for the new button (optional, if needed)
  nextButton.addEventListener("click", () => {
    // Handle 'nextButton' click here
    console.log("Next button clicked!");
  });

  // 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
              );
              console.log(
                "Distance from marker to street: " + distance + " meters"
              );

              // Add your submit logic here
              const message =
                "You are " + distance + " meters from the correct location.";

              // 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,
          });
        }
      }
    '