{"record":{"id":"3fe49285b020ff2b","repo":"angular/components","slug":"cannot-access-google-map-information-before-the-ap-3fe492","errorCode":null,"errorMessage":"Cannot access Google Map information before the API has been initialized. Please wait for the API to load before trying to interact with it.","messagePattern":"Cannot access Google Map information before the API has been initialized\\. Please wait for the API to load before trying to interact with it\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/google-maps/map-base-layer.ts","lineNumber":37,"sourceCode":"  protected readonly _ngZone = inject(NgZone);\n\n  ngOnInit() {\n    if (this._map._isBrowser) {\n      this._ngZone.runOutsideAngular(() => {\n        this._initializeObject();\n      });\n      this._assertInitialized();\n      this._setMap();\n    }\n  }\n\n  ngOnDestroy() {\n    this._unsetMap();\n  }\n\n  private _assertInitialized() {\n    if (!this._map.googleMap) {\n      throw Error(\n        'Cannot access Google Map information before the API has been initialized. ' +\n          'Please wait for the API to load before trying to interact with it.',\n      );\n    }\n  }\n\n  protected _initializeObject() {}\n  protected _setMap() {}\n  protected _unsetMap() {}\n}\n","sourceCodeStart":19,"sourceCodeEnd":48,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/map-base-layer.ts#L19-L48","documentation":"MapBaseLayer (e.g. transit base layers) reads the parent GoogleMap's underlying google.maps.Map via _map.googleMap in _assertInitialized. If the parent map has not finished initializing, the layer cannot attach and the error is thrown from ngOnInit. Notably this check omits the ngDevMode guard, so it throws in production too.","triggerScenarios":"Adding a <map-base-layer> (or subclass) whose ngOnInit runs before the parent <google-map> resolved its google.maps.Map instance.","commonSituations":"Layer rendered immediately alongside the map while the Maps API script is still loading; slow networks; layer used without a proper parent GoogleMap context.","solutions":["Ensure the Google Maps API is loaded and the map initialized before rendering the layer — e.g. wrap the layer with *ngIf=\"mapLoaded\".","Await the map component's resolve promise before adding layers programmatically.","Verify the layer is nested inside a functioning <google-map>.","Handle flaky networks so the API script reliably loads early."],"exampleFix":"// before\n<google-map ...><map-base-layer type=\"transit\"></map-base-layer></google-map>\n// after\n<google-map ... *ngIf=\"apiLoaded\">\n  <map-base-layer type=\"transit\"></map-base-layer>\n</google-map>","handlingStrategy":"validation","validationCode":"// render layers only after the map is ready:\n// <google-map (mapInitialized)... or *ngIf=\"apiLoaded\"><map-base-layer ...></map-base-layer></google-map>\nif (!mapRef.googleMap) {\n  throw new Error('Base layer added before the parent GoogleMap initialized.');\n}","typeGuard":"function isLayerAttachable(map: any): map is {googleMap: google.maps.Map} {\n  return map?.googleMap != null;\n}","tryCatchPattern":"try {\n  this.layer.ngOnInit();\n} catch (e) {\n  if (String((e as Error).message).includes('before the API has been initialized')) {\n    await this.map._resolveMap();\n  }\n}","preventionTips":["Wrap base layers in *ngIf gated on map/API readiness.","Ensure the layer is nested inside a functioning <google-map>.","Note this error throws in production too (no ngDevMode guard) — test with production builds.","Preload the Maps API early to shrink the race window."],"tags":["angular","google-maps","async-initialization","lifecycle","layer"],"backgroundTag":"not-initialized-yet","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}