Cannot interact with a Google Map Circle before it has been

Error message

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

What it means

MapCircle wraps google.maps.Circle, created asynchronously once the parent map resolves. All public getters/setters route through _assertInitialized which throws when this.circle is undefined, blocking interaction with a circle that hasn't been constructed yet.

Source

Thrown at src/google-maps/map-circle/map-circle.ts:305

        this._assertInitialized();
        this.circle.setCenter(center);
      }
    });
  }

  private _watchForRadiusChanges() {
    this._radius.pipe(takeUntil(this._destroyed)).subscribe(radius => {
      if (radius !== undefined) {
        this._assertInitialized();
        this.circle.setRadius(radius);
      }
    });
  }

  private _assertInitialized(): asserts this is {circle: google.maps.Circle} {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      if (!this.circle) {
        throw Error(
          'Cannot interact with a Google Map Circle before it has been ' +
            'initialized. Please wait for the Circle to load before trying to interact with it.',
        );
      }
    }
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

Defer circle API calls until after the map/circle initialization promise resolves.
Bind properties via template inputs so the component applies them at creation time.
Use mapInitialized events to gate imperative access.
In tests, await whenStable or the component's resolve promise.

Example fix

// before
const radius = this.circle.getRadius();
// after
this.map._resolveMap().then(() => {
  const radius = this.circle.getRadius();
});

Defensive patterns

Strategy: try-catch

Validate before calling

async function whenCircleReady(circle: any) {
  if (!circle['circle']) throw new Error('Circle not ready; wait for the parent map to initialize.');
  return circle;
}

Type guard

function isCircleReady(c: any): c is {circle: google.maps.Circle} {
  return c?.circle != null;
}

Try / catch

try {
  const radius = this.circle.getRadius();
} catch (e) {
  if (String((e as Error).message).includes('Circle before it has been initialized')) {
    await this.map._resolveMap();
  }
}

Prevention

Set circle properties via template inputs, not imperative calls before init.
Gate getters (getBounds/getCenter/getRadius) behind map initialization.
In tests, await fixture stability before geometry assertions.
Keep the Maps API script loading fast and early to reduce race windows.

When it happens

Trigger: Calling getBounds, getCenter, getRadius, getDraggable, getEditable or setters on <map-circle> before the async creation finished (e.g. synchronously after view init).

Common situations: Reading circle radius/center in a parent's ngOnInit/ngAfterViewInit; form controls writing values before init; tests asserting circle geometry without awaiting; slow Maps API loading widening the race window.

Related errors

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