in this javascript in the if statement 'if (data && data.length > 1'  add a click event function to allow the user to add a marker to the map, - ' 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
    
   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 },
        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();

   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!');
 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 && data.length > 1) {
  const nextStreetDetails = data[1]; // Get the next street details from the json data
  // Extract next street details
  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 },
    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);
   
   
 } else {
  console.log('No next entry in the data.');
  const overmessage ="Game Over";

       // Update the 'results' div using DOM manipulation
       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
       );
       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,
     });
    }
   }'