My old google maps markers javascript not appearing in Iframe

I have been dusting off an old project (2017) recently and I have been working through some code that requires markers on a map via JavaScript, but although it did work, it does not now. I have signed up for a API, but can't seem to find the right code for the job. Here is the old code.

 <script>



 

 function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 55.0567842, lng: -1.599155200000041}
    });

    setMarkers(map);
  }


  // Data for the markers consisting of a name, a LatLng and a zIndex for the
  // order in which these markers should display on top of each other.
  var beaches = [ ");




     function setMarkers(map) {
            // Adds markers to the map.
    
            // Marker sizes are expressed as a Size of X,Y where the origin of the image
            // (0,0) is located in the top left of the image.
    
            // Origins, anchor positions and coordinates of the marker increase in the X
            // direction to the right and in the Y direction down.

            var image = {
              url: '1.png',
              // This marker is 20 pixels wide by 32 pixels high.
              size: new google.maps.Size(20, 32),
              // The origin for this image is (0, 0).
              origin: new google.maps.Point(0, 0),
              // The anchor for this image is the base of the flagpole at (0, 32).
              anchor: new google.maps.Point(0, 32)
            };
            // Shapes define the clickable region of the icon. The type defines an HTML
            // <area> element 'poly' which traces out a polygon as a series of X,Y points.
            // The final coordinate closes the poly by connecting to the first coordinate.
    
            var shape = {
              coords: [1, 1, 1, 20, 18, 20, 18, 1],
              type: 'poly'
            };
    
            for (var i = 0; i < beaches.length; i++) {
              var beach = beaches[i];
              var marker = new google.maps.Marker({
                position: {lat: beach[1], lng: beach[2]},
                map: map,
                icon: image,
                shape: shape,
                title: beach[0],
                zIndex: beach[3]
              });
            }
          }
        </script>
    
        <script async defer
        src='https://maps.googleapis.com/maps/api/js?key=MYKEYQ&callback=initMap'>
        </script>