angular 13 and @angular/google-maps

Question

I could not find any article that explains how to use @angular/google-maps in a sub module with lazy-load.

The map loads but when I try to add markers I get this errors

ERROR NullInjectorError: R3InjectorError(AppModule)[GoogleMap -> GoogleMap -> GoogleMap]: 
  NullInjectorError: No provider for GoogleMap!

If I add GoogleMap to providers in MapModule the error is now

ERROR Error: Cannot access Google Map information before the API has been initialized. Please wait for the API to load before trying to interact with it.

MapModule

@NgModule({
      declarations: [
        MyMapComponent
      ],
      imports: [
        CommonModule,
        GoogleMapsModule, 
        HttpClientJsonpModule
      ],
      exports:[
        MyMapComponent
      ],
      providers:[
        GoogleMap //<<<<<<<< is this ok ?
      ]
    })

MyMapComponent

@Component({
  selector: 'my-map',
  templateUrl: './my-map.component.html',
  styleUrls: ['./my-map.component.scss']
})
export class MyMapComponent implements OnInit {


  apiLoaded: Observable<boolean>;
  mapOptions: google.maps.MapOptions = {
    center: { lat: 45.8, lng: 24.5 },
    zoom: 7,
    disableDoubleClickZoom: true,
    disableDefaultUI: true,
  }

  markerPositions:any = []
  // map!: google.maps.Map

  @ViewChild(GoogleMap)
  public map!: GoogleMap;


  constructor(
    httpClient: HttpClient,
  ) {
    this.apiLoaded = httpClient.jsonp(`https://maps.googleapis.com/maps/api/js?key=${environment.mapsApiKey}`, 'callback')
      .pipe(
        map(() => true),
        catchError((err) => of(false)),
      );
  }

  ngOnInit(): void { }

  onMapClick(event: any) {
    console.log(event)
  }

  onMapReady(map: any) {
    map.addListener(this.onMapClick)
  }

}

my-map.controller.html

<div *ngIf="apiLoaded | async" fxFill >
    <google-map (mapInitialized)="onMapReady($event)" [options]="mapOptions" (mapClick)="addMarker($event)" ></google-map>
    <map-marker [position]="{lat:45.8,lng:24.5}"></map-marker>
</div>