{"record":{"id":"8b118cc2f395e210","repo":"angular/components","slug":"cannot-interact-with-a-google-map-circle-before-it","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/google-maps/map-circle/map-circle.ts","lineNumber":305,"sourceCode":"        this._assertInitialized();\n        this.circle.setCenter(center);\n      }\n    });\n  }\n\n  private _watchForRadiusChanges() {\n    this._radius.pipe(takeUntil(this._destroyed)).subscribe(radius => {\n      if (radius !== undefined) {\n        this._assertInitialized();\n        this.circle.setRadius(radius);\n      }\n    });\n  }\n\n  private _assertInitialized(): asserts this is {circle: google.maps.Circle} {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this.circle) {\n        throw Error(\n          'Cannot interact with a Google Map Circle before it has been ' +\n            'initialized. Please wait for the Circle to load before trying to interact with it.',\n        );\n      }\n    }\n  }\n}\n","sourceCodeStart":287,"sourceCodeEnd":313,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/map-circle/map-circle.ts#L287-L313","documentation":"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.","triggerScenarios":"Calling getBounds, getCenter, getRadius, getDraggable, getEditable or setters on <map-circle> before the async creation finished (e.g. synchronously after view init).","commonSituations":"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.","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."],"exampleFix":"// before\nconst radius = this.circle.getRadius();\n// after\nthis.map._resolveMap().then(() => {\n  const radius = this.circle.getRadius();\n});","handlingStrategy":"try-catch","validationCode":"async function whenCircleReady(circle: any) {\n  if (!circle['circle']) throw new Error('Circle not ready; wait for the parent map to initialize.');\n  return circle;\n}","typeGuard":"function isCircleReady(c: any): c is {circle: google.maps.Circle} {\n  return c?.circle != null;\n}","tryCatchPattern":"try {\n  const radius = this.circle.getRadius();\n} catch (e) {\n  if (String((e as Error).message).includes('Circle before it has been initialized')) {\n    await this.map._resolveMap();\n  }\n}","preventionTips":["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."],"tags":["angular","google-maps","async-initialization","lifecycle","dev-mode"],"backgroundTag":"not-initialized-yet","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}