Yet another AdvancedMarkerElement marker question - They are not showing

Hi all new here and sort of new to JS. I have an app that's been in use for 10+years and still being used. It in PHP/Mysql/JS and uses GM for delivery locations. I thought I'd upgrade it to the new marker system but can't get it to work. I think it's just me and my limited understanding of JS.

Anyway, the following code shows the map but not the markers. The rfap3 etc are based on a CSS tag. Any help very appreciated. Could really find any existing posts that helped me.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=Function.prototype&key=MYKEY&loading=async"></script>
<script type="text/javascript">
async function initmap() {
  // setTimeout second value is milliseconds
  // ie: 1000 = 1 second, 30000 = 30 seconds
  setTimeout( "document.location = document.location;", 30000);
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const myLatLng = new google.maps.LatLng(-41.439068, 147.135773);
  const bounds = new google.maps.LatLngBounds();
  const myOptions = {
    zoom: 12,
    maxZoom: 18,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapId: 'rfamaps123456'
  };
  map = new google.maps.Map(document.getElementById("show_map"), myOptions);

  var rfastodo = [
    ['3055',-41.416744,147.134476,'rfap3',201],
    ['3082',-41.432907,147.152039,'rfap3',202],
    ['3079',-41.431507,147.147400,'rfap2',203]
  ];
  
setRFAs(map, rfastodo);

  function setRFAs(map, rfalist){
      const rfaTag = document.createElement("div");
      for (var i = 0; i < rfalist.length; i++) {
        var rfas = rfalist[i];
        var myLatLng2 = new google.maps.LatLng(rfas[1], rfas[2]);
        rfaTag.classname = rfas[3];
        rfaTag.textcontent = rfas[0];
        var marker = new AdvancedMarkerElement({
          position: myLatLng2,
          map: map,
          content: rfaTag,
          zIndex: rfas[4]
        });
      }
      bounds.extend(marker.position);
      map.fitBounds(bounds);
  }
}
</script>

Just finding that everything is there except the markers.

You have multiple issues in your setRFAs function

  // this should be inside the for loop
  const rfaTag = document.createElement("div");

and

    rfaTag.classname = rfas[3]; // this should be className
    rfaTag.textcontent = rfas[0]; // this should be textContent

and

  // this should be inside the for loop
  bounds.extend(marker.position);

With the fixes as per above, the function looks like:

function setRFAs(map, rfalist) {
  for (var i = 0; i < rfalist.length; i++) {
    const rfaTag = document.createElement("div");
    var rfas = rfalist[i];
    var myLatLng2 = new google.maps.LatLng(rfas[1], rfas[2]);
    rfaTag.classBame = rfas[3];
    rfaTag.textContent = rfas[0];
    var marker = new AdvancedMarkerElement({
      position: myLatLng2,
      map: map,
      content: rfaTag,
      zIndex: rfas[4]
    });
    bounds.extend(marker.position);
  }
  map.fitBounds(bounds);
}

as a bonus - I'd write it like

function setRFAs(rfaList) {
  rfaList.forEach(([textContent, lat, lng, className, zIndex]) => {
      const content = document.createElement("div");
      content.className = className;
      content.textContent = textContent;
      position = new google.maps.LatLng(lat, lng);
      const marker = new AdvancedMarkerElement({position, map, content, zIndex});
      bounds.extend(marker.position);
    }
  );
  map.fitBounds(bounds);
}

and call it without the map argument, since that's just like how you don't call it with bounds, you just use bounds from the outer scope anyway