{"record":{"id":"8ed14d68f3bbff21","repo":"angular/components","slug":"cannot-access-google-map-information-before-the-ap-8ed14d","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-marker-clusterer/map-marker-clusterer.ts","lineNumber":215,"sourceCode":"    );\n  }\n\n  private _destroyCluster() {\n    // TODO(crisbeto): the naming here seems odd, but the `MarkerCluster` method isn't\n    // exposed. All this method seems to do at the time of writing is to call into `reset`.\n    // See: https://github.com/googlemaps/js-markerclusterer/blob/main/src/markerclusterer.ts#L205\n    this.markerClusterer?.onRemove();\n    this.markerClusterer = undefined;\n  }\n\n  private _getInternalMarkers(markers: MarkerDirective[]): Promise<Marker[]> {\n    return Promise.all(markers.map(marker => marker._resolveMarker()));\n  }\n\n  private _assertInitialized(): asserts this is {markerClusterer: MarkerClusterer} {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this._googleMap.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      if (!this.markerClusterer) {\n        throw Error(\n          'Cannot interact with a MarkerClusterer before it has been initialized. ' +\n            'Please wait for the MarkerClusterer to load before trying to interact with it.',\n        );\n      }\n    }\n  }\n}\n","sourceCodeStart":197,"sourceCodeEnd":229,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts#L197-L229","documentation":"Thrown by MapMarkerClusterer's _assertInitialized when the underlying Google Map instance (this._googleMap.googleMap) is still undefined. The clusterer needs a live map to attach to; this guard reports that the Maps API/map hasn't initialized yet instead of failing obscurely later. It is dev-mode (ngDevMode) gated.","triggerScenarios":"_watchForMarkerChanges calls _assertInitialized while _googleMap.googleMap is undefined — e.g. the clusterer renders before the MapComponent has created its map (API script not loaded yet, or clusterer placed outside a <google-map> reference that has not initialized).","commonSituations":"Adding markers immediately at app bootstrap before the map script loads, using the clusterer without a proper MapComponent parent/reference, slow network delaying the Maps API, or map input not yet bound.","solutions":["Render the marker clusterer only after the map is ready: wrap in @ngIf driven by map.ready subscription or a loaded flag.","Ensure the clusterer is inside/attached to a MapComponent whose googleMap is set.","Verify the Google Maps JS API script loads (network tab, API key validity, billing enabled).","Defer marker addition until ngAfterViewInit + map ready instead of ngOnInit.","Catch the error as a signal to retry initialization once the map loads."],"exampleFix":"// before\n<google-map #map><map-marker-clusterer [map]=\"map.googleMap\">...</map-marker-clusterer></google-map>\n// after\n<google-map #map (mapReady)=\"mapLoaded = true\">\n  <ng-container *ngIf=\"mapLoaded\">\n    <map-marker-clusterer [map]=\"map.googleMap\">...</map-marker-clusterer>\n  </ng-container>\n</google-map>","handlingStrategy":"validation","validationCode":"if (!mapRef?.googleMap) { /* wait for map ready before mounting clusterer */ }","typeGuard":"function isMapReady(map: google.maps.Map | undefined | null): map is google.maps.Map { return !!map; }","tryCatchPattern":"try {\n  clusterer.getMarkers();\n} catch (e) {\n  if ((e as Error).message.includes('before the API has been initialized')) {\n    map.ready.subscribe(() => retry());\n  } else { throw e; }\n}","preventionTips":["Render clusterer only after map.ready fires.","Always pass [map]=\"map.googleMap\" from a mounted MapComponent.","Validate API key/script load first.","Defer marker setup to ngAfterViewInit.","Watch network tab for failed Maps API loads."],"tags":["angular","google-maps","lifecycle","initialization"],"backgroundTag":"component-accessed-before-initialization","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}