angular/components · error

Cannot access Google Map information before the API has been

Error message

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

What it means

MapBaseLayer (e.g. transit base layers) reads the parent GoogleMap's underlying google.maps.Map via _map.googleMap in _assertInitialized. If the parent map has not finished initializing, the layer cannot attach and the error is thrown from ngOnInit. Notably this check omits the ngDevMode guard, so it throws in production too.

Source

Thrown at src/google-maps/map-base-layer.ts:37

  protected readonly _ngZone = inject(NgZone);

  ngOnInit() {
    if (this._map._isBrowser) {
      this._ngZone.runOutsideAngular(() => {
        this._initializeObject();
      });
      this._assertInitialized();
      this._setMap();
    }
  }

  ngOnDestroy() {
    this._unsetMap();
  }

  private _assertInitialized() {
    if (!this._map.googleMap) {
      throw 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.',
      );
    }
  }

  protected _initializeObject() {}
  protected _setMap() {}
  protected _unsetMap() {}
}

View on GitHub (pinned to 0411926e7d)

Solutions

1. Ensure the Google Maps API is loaded and the map initialized before rendering the layer — e.g. wrap the layer with *ngIf="mapLoaded".
2. Await the map component's resolve promise before adding layers programmatically.
3. Verify the layer is nested inside a functioning <google-map>.
4. Handle flaky networks so the API script reliably loads early.

Example fix

// before
<google-map ...><map-base-layer type="transit"></map-base-layer></google-map>
// after
<google-map ... *ngIf="apiLoaded">
  <map-base-layer type="transit"></map-base-layer>
</google-map>

// render layers only after the map is ready:
// <google-map (mapInitialized)... or *ngIf="apiLoaded"><map-base-layer ...></map-base-layer></google-map>
if (!mapRef.googleMap) {
  throw new Error('Base layer added before the parent GoogleMap initialized.');
}

function isLayerAttachable(map: any): map is {googleMap: google.maps.Map} {
  return map?.googleMap != null;
}

try {
  this.layer.ngOnInit();
} catch (e) {
  if (String((e as Error).message).includes('before the API has been initialized')) {
    await this.map._resolveMap();
  }
}

When it happens

Trigger: Adding a <map-base-layer> (or subclass) whose ngOnInit runs before the parent <google-map> resolved its google.maps.Map instance.

Common situations: Layer rendered immediately alongside the map while the Maps API script is still loading; slow networks; layer used without a proper parent GoogleMap context.

Related errors

• Cannot interact with a MarkerClusterer before it has been in
• Cannot access Google Map information before the API has been
• Cannot interact with a Google Map Bicycling Layer before it
• Cannot interact with a Google Map Circle before it has been
• Cannot interact with a Google Map Marker before it has been

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/3fe49285b020ff2b. Report an issue: GitHub.