why is the Street View image not displaying from this javascript '<!DOCTYPE html>
<html>
  <head>
    <title>Simple Google Map</title>
    <style>
      html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;  /* Remove default margins */
  padding: 0;  /* Remove default padding */
}  
     #map {
  height: 100%;
  width: 60%;
  float: left; /* Make the map float left */
  margin: 0;
  padding: 0;
}

#results {
  width: 40%;
  float: right; /* Make the results div float right */
  background-color: #f5f5f5; /* Optional background color */
  padding: 10px; /* Optional padding */
  box-sizing: border-box; /* Include padding in width calculation */
}

        #streetview {
        height: 300px; /* Adjust the height as needed */
        width: 100%;
      }

    </style>
  </head>
  <body>
    <div id="map"></div>
      <div id="results">Where is this?<br><br><img src="https://www.tripgeo.com/Thumb/j4jq7z/1?v=1710359803884" alt="Image Description">
</div>
      <div id="streetview"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACf-8ebLcJNusJWZehaKgWnV7vrDACk_A&callback=initMap"></script>
    <script>

let markers = []; // Array to store markers
let polyline; // Variable to store the polyline

const sydneyOperaHouse = { 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: sydneyOperaHouse,
    zoom: zoom,
    mapId: "DEMO_MAP_ID",  
  });

  // Add click listener to the map
  map.addListener("click", (event) => {
    placeMarker(event.latLng, map);
  });
}

function placeMarker(location, map) {
  const marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  // Add marker to the markers array
  markers.push(marker);

  // Calculate distance on marker placement
  calculateDistance(marker.getPosition(), map);
}

function calculateDistance(userPosition, map) {
  const earthRadius = 6371e3; // Earth radius in meters

  const userLat = userPosition.lat();
  const userLng = userPosition.lng();
  const sydneyOperaHouseLat = sydneyOperaHouse.lat;
  const sydneyOperaHouseLng = sydneyOperaHouse.lng;

  const latDistanceRad = radians(userLat - sydneyOperaHouseLat);
  const lngDistanceRad = radians(userLng - sydneyOperaHouseLng);

  const a = Math.sin(latDistanceRad / 2) * Math.sin(latDistanceRad / 2) +
            Math.cos(radians(userLat)) * Math.cos(radians(sydneyOperaHouseLat)) *
            Math.sin(lngDistanceRad / 2) * Math.sin(lngDistanceRad / 2);

  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

  const distance = earthRadius * c; // Distance in meters

  

function calculateGeoguessrPoints(distance) {

 
  // Award points based on distance thresholds
  if (distance === 0) {
    return 5000;
  } else if (0 < distance && distance <= 12) {
    return 4000;
  } else if (12 < distance && distance <= 75) {
    return 4000; // 4000 points for 12-75 meters
  } else if (76 <= distance && distance <= 150) {
    return 3000;
  } else if (151 <= distance && distance <= 300) {
    return 2000;
  } else if (301 <= distance && distance <= 600) {
    return 1000;
  } else {
    return 0;
  }
}
    points = calculateGeoguessrPoints(distance);

  const message = `You clicked ${distance.toFixed(2)} meters from the correct location. You score ${points} points`;
  console.log(message);

    // Update the 'results' div using DOM manipulation
  const resultsDiv = document.getElementById('results');
  resultsDiv.textContent = message;

  // Create and draw polyline after distance calculation
  createPolyline(userPosition, sydneyOperaHouse, map);
}

function initStreetView() {
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("streetview"),
    {
      position: { lat: 51.539196, lng: -0.011556 },
      pano: "3qdS9rPHCHMJEyB-pn1lIg",
      heading: 32.727,
      pitch: 1.033,
    }
  );
}        

function createPolyline(origin, destination, map) {
  const path = [origin, destination];
  polyline = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: '#FF0000', // Set polyline color (red)
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map,
  });
}

function radians(degrees) {
  return degrees * Math.PI / 180;
}

        
    </script>
  </body>
</html>
'