Map not updating till a forced refresh or mouse click

Question

I'm using a map to track stops during my RV travels. Thus the map is rendering polyLines and markers. Here is html.

<div style="min-height: 400px;">
<agm-map *ngIf="showMap" [latitude]="lat" [longitude]="lng" [fitBounds]="bounds" 
[zoom]="zoom">
  <agm-polyline [strokeColor]="'#2196f3'">
    <ng-container *ngFor="let i of points">
      <agm-polyline-point [latitude]="i.lat()" [longitude]="i.lng()"></agm-polyline-point>
    </ng-container>
  </agm-polyline>
  <agm-marker *ngFor="let mark of markers"
      [latitude]="mark.latitude"
      [longitude]="mark.longitude"
      [title]="mark.title"
      [label]="mark.label"
      [iconUrl]="mark.iconUrl">
  </agm-marker>
</agm-map >

Nothing fancy in the component about the data.

markers: any[] = [];
points: any[] = [];
bounds: any;
showMap: boolean = true;
stopDistance: number = 300;

I have a setCenter function that I call after all of the data is updated. and I've added a couple markers to it to see that the bounds have been updated correctly. I didn't add that code for brevity.

 setCenter() {
    this.bounds = new google.maps.LatLngBounds();
    this.points.forEach(m => this.bounds.extend(m));
     this.lat = this.bounds.getCenter().lat();
    this.lng = this.bounds.getCenter().lng();
    this.zoom = 1;

Expected result: After adding the markers and p-lines and then setting the bounds I expect the map to update and center.

Result: The map doesn't update or move until I move the mouse over the map and sometimes click on it. This causes an immediate update so I'm assuming it isn't stuck in a slow function. I've also looked at the performance tab in the debugger to see if it was stuck somewhere.

Things tried: Using and ngIf to hide and then show the map, the latest version has manual setting of the lat and lng and zoom. Tried different browsers.