Cannot interact with a Google Map Transit Layer before it ha

Error message

Cannot interact with a Google Map Transit Layer before it has been initialized. Please wait for the Transit Layer to load before trying to interact with it.

What it means

MapTransitLayer throws via _assertLayerInitialized when code interacts with it before the google.maps.TransitLayer instance exists. The native layer is created asynchronously after the Maps JS API loads; any premature interaction hits this guard. The assertion runs unconditionally (also in production).

Source

Thrown at src/google-maps/map-transit-layer/map-transit-layer.ts:68

    }
  }

  private _initialize(map: google.maps.Map, layerConstructor: typeof google.maps.TransitLayer) {
    this._zone.runOutsideAngular(() => {
      this.transitLayer = new layerConstructor();
      this.transitLayerInitialized.emit(this.transitLayer);
      this._assertLayerInitialized();
      this.transitLayer.setMap(map);
    });
  }

  ngOnDestroy() {
    this.transitLayer?.setMap(null);
  }

  private _assertLayerInitialized(): asserts this is {transitLayer: google.maps.TransitLayer} {
    if (!this.transitLayer) {
      throw Error(
        'Cannot interact with a Google Map Transit Layer before it has been initialized. ' +
          'Please wait for the Transit Layer to load before trying to interact with it.',
      );
    }
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

Wait for map initialization (mapReady event) before touching the transit layer.
Confirm the Maps JS API script loaded successfully — check console/network for script errors.
Move layer interaction into ngAfterViewInit plus a readiness subscription rather than lifecycle-start hooks.
Optionally null-check the directive's internal state before calling.

Example fix

// before
ngOnInit() {
  this.transitLayerDirective.someMethod(); // throws
}
// after
this.map.mapReady.subscribe(() => {
  this.transitLayerDirective.someMethod();
});

Defensive patterns

Strategy: type-guard

Validate before calling

if (layer && (layer as any).transitLayer) { /* safe to interact */ }

Type guard

function isTransitLayerInitialized(l: any): l is {transitLayer: google.maps.TransitLayer} {
  return !!l && !!l.transitLayer;
}

Try / catch

try {
  this.transitLayerDirective.someMethod();
} catch (e) {
  if ((e as Error).message.includes('Transit Layer')) {
    this.map.mapReady.pipe(take(1)).subscribe(() => this.transitLayerDirective.someMethod());
  } else { throw e; }
}

Prevention

Interact with the transit layer only after the map emits its ready event
Check Maps API script load success (key validity, network, CSP)
Defer template-driven interactions until after initialization
Keep layer setup in a post-init hook rather than lifecycle-start hooks

When it happens

Trigger: Any transit-layer API interaction that runs _assertLayerInitialized (from _initialize) when this.transitLayer is still undefined — i.e. before the Maps script loads or before the component finishes initialization.

Common situations: Calling layer methods before mapReady; Maps JS API load failure (invalid key, offline, ad-blocker) so the layer is never constructed; interacting from ngOnInit instead of after initialization.

Related errors

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