I am trying to load some lat and longitudes for a map in angular, for some reason google maps won’t allow.

I get the Data back from Firebase when I click a menu button every choice brings back a different array.

data looks like this

x_arr = [
{
"id" : "Plce ID",
"name" : "Place",
"location" : "Location",
"lat": 00000000,
"lon": 00000000
    }
]

Service looks like this

this.specific$ = this.x$.pipe(switchMap((x) => {
  return this.db.list('schedules', ref => ref.orderByChild('id').equalTo(x)).valueChanges();   
  }));


this.specific$.subscribe({next:(value) => {

    this.x_arr = value;
});

The component with the Map

 constructor(public f: FireService){}
 center: google.maps.LatLngLiteral = {lat: this.f.x_arr[0]?.lat, lng: this.f.x_arr[0]?.lon };

Component HTML

   <google-map height="1080"
        width="1920"
        [center]="center"/>

On first click this is the error

InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number

If I click around a few times. The Value is then pushed to the map and then the map works.
BUT ! When I choose a different value the should update with a new lat and lon the first one persists and the map never changes.

Whats wrong here ?