{"record":{"id":"b525c4c0a54dd46b","repo":"angular/components","slug":"cannot-interact-with-a-google-map-rectangle-before","errorCode":null,"errorMessage":"Cannot interact with a Google Map Rectangle before it has been initialized. Please wait for the Rectangle to load before trying to interact with it.","messagePattern":"Cannot interact with a Google Map Rectangle before it has been initialized\\. Please wait for the Rectangle to load before trying to interact with it\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/google-maps/map-rectangle/map-rectangle.ts","lineNumber":262,"sourceCode":"    this._options.pipe(takeUntil(this._destroyed)).subscribe(options => {\n      this._assertInitialized();\n      this.rectangle.setOptions(options);\n    });\n  }\n\n  private _watchForBoundsChanges() {\n    this._bounds.pipe(takeUntil(this._destroyed)).subscribe(bounds => {\n      if (bounds) {\n        this._assertInitialized();\n        this.rectangle.setBounds(bounds);\n      }\n    });\n  }\n\n  private _assertInitialized(): asserts this is {rectangle: google.maps.Rectangle} {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this.rectangle) {\n        throw Error(\n          'Cannot interact with a Google Map Rectangle before it has been initialized. ' +\n            'Please wait for the Rectangle to load before trying to interact with it.',\n        );\n      }\n    }\n  }\n}\n","sourceCodeStart":244,"sourceCodeEnd":270,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/map-rectangle/map-rectangle.ts#L244-L270","documentation":"Google Map Rectangle component (Angular Components google-maps) throws this in its _assertInitialized guard whenever an API is called before the underlying google.maps.Rectangle object exists. The native Rectangle is created asynchronously after the Maps JS API finishes loading, so any interaction must wait for the component's mapReady/initialization. It only throws in dev mode for some callers, but the guard protects all access paths.","triggerScenarios":"Calling getBounds(), getDraggable(), getEditable(), getVisible(), _initialize()-driven option changes, or _watchForOptionsChanges() before the Maps API script has loaded and the Rectangle has been constructed — e.g. accessing via @ViewChild in ngOnInit or ngAfterViewInit before the 'google.maps.Rectangle' instance is set.","commonSituations":"Accessing the MapRectangle directive instance too early in the component lifecycle; slow network or blocked Google Maps script load so mapReady never fires; calling methods in a constructor or ngOnInit instead of subscribing to mapReady.","solutions":["Wait for the component's initialization before interacting: get the Rectangle via @ViewChild and only call methods after map initialized event (mapReady) emits or inside ngAfterViewInit combined with a loaded check.","Subscribe to the (mapReady) output of the map rather than assuming the API is available synchronously.","Verify the Google Maps JS API script actually loads (check network errors, invalid API key, CSP blockers) — if the script never loads, rectangle stays undefined.","Gate calls with an optional check: if (rect.rectangle) before invoking methods in dev tooling."],"exampleFix":"// before\nngOnInit() {\n  this.rectDirective.getEditable(); // throws: not initialized yet\n}\n// after\nngAfterViewInit() {\n  this.mapReady$.subscribe(() => {\n    this.rectDirective.getEditable(); // safe: Rectangle loaded\n  });\n}","handlingStrategy":"type-guard","validationCode":"const rect: MapRectangle | undefined = this.rectDirective;\nif (rect && (rect as any).rectangle) { /* safe to call */ }","typeGuard":"function isRectInitialized(r: any): r is {rectangle: google.maps.Rectangle} {\n  return !!r && !!r.rectangle;\n}","tryCatchPattern":"try {\n  this.rectDirective.getEditable();\n} catch (e) {\n  if ((e as Error).message.includes('before it has been initialized')) {\n    // defer until mapReady, queue or retry after initialization\n  } else { throw e; }\n}","preventionTips":["Only interact with google-maps directives after the map's mapReady output fires","Never call directive methods from ngOnInit/constructor; use ngAfterViewInit plus readiness signal","Handle Maps API load failures (bad key, blocked script) explicitly","Centralize Maps access behind a service that awaits a shared 'apiLoaded' promise"],"tags":["angular","google-maps","lifecycle","initialization"],"backgroundTag":"component-not-initialized","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}