Cannot interact with a Google Map Bicycling Layer before it

Error message

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

What it means

MapBicyclingLayer creates its google.maps.BicyclingLayer asynchronously after the map is ready. _assertLayerInitialized (used by _initialize and accessors) throws if bicyclingLayer is still unset. The message mistakenly mentions the Transit Layer, but it guards the bicycling layer object.

Source

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

    }
  }

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

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

  private _assertLayerInitialized(): asserts this is {bicyclingLayer: google.maps.BicyclingLayer} {
    if (!this.bicyclingLayer) {
      throw Error(
        'Cannot interact with a Google Map Bicycling 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 before mutating layer properties.
Use the component's async signals/events to know when the layer is ready.
In tests, await initialization promises or fixture stability.
Bind inputs declaratively and let the component apply them when ready, instead of imperative calls.

Example fix

// before
ngAfterViewInit() { this.layer.setMap(this.map.googleMap); }
// after
this.map._resolveMap().then(() => {
  this.layer.setMap(this.map.googleMap);
});

Defensive patterns

Strategy: validation

Validate before calling

if (!bicyclingLayerComponent['bicyclingLayer']) {
  throw new Error('BicyclingLayer not ready; wait for the parent map to initialize.');
}

Type guard

function isBicyclingLayerReady(c: any): c is {bicyclingLayer: google.maps.BicyclingLayer} {
  return c?.bicyclingLayer != null;
}

Try / catch

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

Prevention

Bind layer inputs declaratively instead of calling setters imperatively.
Gate layer interactions on map initialization events.
In tests, await the initialization promise before asserting layer state.
Don't rely on the message text mentioning 'Transit Layer' — it guards the bicycling layer.

When it happens

Trigger: Calling bicycling-layer getters/setters or _initialize paths before the BicyclingLayer instance was constructed post-map resolution.

Common situations: Toggling layer properties in ngOnInit of a parent; unit tests asserting layer state before async init; API script slowness delaying map/layer creation.

Related errors

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