docs-bug(@angular/google-maps): missing documentation

[dsl400]

Documentation Feedback

The documentation page on angular.io is missing and 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>

Affected documentation page

https://material.angular.io/components/google-maps/overview