In this javascript add a button called 'submit' to a div with the id 'buttons' when the marker is added to the map. ' let streetLatitude; // Define streetLatitude globally
      let streetLongitude; // Define streetLongitude globally

      function fetchStreetDetails() {
        fetch("main.json")
          .then((response) => response.json())
          .then((data) => {
            const streetDetails = data[0];
            streetLatitude = streetDetails.StreetLatitude;
            streetLongitude = streetDetails.StreetLongitude;
            const streetHeading = streetDetails.StreetHeading;
            const streetPitch = streetDetails.StreetPitch;
            const 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);
          })
          .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;
          const marker = new google.maps.Marker({
            position: clickLocation,
            map: map,
            draggable: true // Set draggable to true
          });
           // Remove the click listener after the marker is added
  google.maps.event.clearListeners(map, 'click');
           // Calculate distance on marker add using Pythagorean theorem
    const distance = calculateDistance(
      clickLocation.lat(),
      clickLocation.lng(),
      streetLatitude,
      streetLongitude
          );
          console.log("Distance from marker to street: " + distance + " meters");
          
           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);
          
        }

        // Add click listener to the map
        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(clickLocation) {
    const polyline = new google.maps.Polyline({
      path: [clickLocation.toJSON(), { lat: streetLatitude, lng: streetLongitude }],
      strokeColor: "#FF0000", // red color
      strokeWeight: 2,
      map: map,
    });
  }
      }
    '