OpenLayers zoom on a collection of points

I’m new to OpenLayers, but I have a working map with 5 points based on GPS coords working. however, it’s not zooming to the extents of the points. Wondering what I’ve done wrong (could very well be a typo, JavaScript is not my forte…). the "adjust_map_zoom" function is where my problem lies, i believe.

The map is generated, the points are all there and the map is initially set to the mapDefaultZoom setting. If I change that initialize setting, the zoom changes. however, as the points spread apart and then come back together, the zoom doesn’t change to fit their new boundaries.

var map;
var mapLat = <?php echo $xcenter; ?>;
var mapLng = <?php echo $ycenter; ?>;
var mapDefaultZoom = 12;

function initialize_map() {
  map = new ol.Map({
    target: "map",
    layers: [
        new ol.layer.Tile({
            target: "tile",
            source: new ol.source.OSM({
                  url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
            })
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([mapLng, mapLat]),
        zoom: mapDefaultZoom
    })
  });
}

function add_map_point(lat, lng) {
  var vectorLayer = new ol.layer.Vector({
    target: "points",
    source:new ol.source.Vector({
      features: [new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
        })]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
      })
    })
  });

  map.addLayer(vectorLayer);
}


function adjust_map_zoom(x1, y1, x2, y2) {
  map.getView().fit(ol.proj.transformExtent([ x1, y1, x2, y2 ], 'EPSG:COORDS', 'EPSG:MAP'), {size:map.getSize(), maxZoom:18});
}

if i change the adjust_map_zoom code to

map.getView().fit(source.getExtent(), {size:map.getSize(), maxZoom:16});

or even

map.getView().fit(source.getExtent(), map.getSize());

the zoom does not change at all.

Could someone point out my mistake please? the bulk of the code was copied from online examples.

var vectorLayer = new ol.layer.Vector({
  target: "points",
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 0.5],
      anchorXUnits: "fraction",
      anchorYUnits: "fraction",
      src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
    })
  })
});

map.addLayer(vectorLayer);

function add_map_point(lat, lng) {
  var source = vectorLayer.getSource();
  var pointFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
  });
  source.addFeature(pointFeature);
}

map.getView().fit(vectorLayer.getSource().getExtent(), {
  size: map.getSize(),
  maxZoom: 16
});