{"record":{"id":"80dd44c4a12e62c3","repo":"angular/components","slug":"cannot-access-google-map-information-before-the-ap","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/google-map/google-map.ts","lineNumber":533,"sourceCode":"  private _combineOptions(): google.maps.MapOptions {\n    const options = this._options || {};\n    return {\n      ...options,\n      // It's important that we set **some** kind of `center` and `zoom`, otherwise\n      // Google Maps will render a blank rectangle which looks broken.\n      center: this._center || options.center || DEFAULT_OPTIONS.center,\n      zoom: this._zoom ?? options.zoom ?? DEFAULT_OPTIONS.zoom,\n      // Passing in an undefined `mapTypeId` seems to break tile loading\n      // so make sure that we have some kind of default (see #22082).\n      mapTypeId: this.mapTypeId || options.mapTypeId || DEFAULT_OPTIONS.mapTypeId,\n      mapId: this.mapId || options.mapId,\n    };\n  }\n\n  /** Asserts that the map has been initialized. */\n  private _assertInitialized(): asserts this is {googleMap: google.maps.Map} {\n    if (!this.googleMap && (typeof ngDevMode === 'undefined' || ngDevMode)) {\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\nconst cssUnitsPattern = /([A-Za-z%]+)$/;\n\n/** Coerces a value to a CSS pixel value. */\nfunction coerceCssPixelValue(value: any): string {\n  if (value == null) {\n    return '';\n  }\n\n  return cssUnitsPattern.test(value) ? value : `${value}px`;\n}\n","sourceCodeStart":515,"sourceCodeEnd":551,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/google-map/google-map.ts#L515-L551","documentation":"GoogleMap resolves the underlying google.maps.Map asynchronously after the API loads. Methods like fitBounds, panTo, getBounds, getCenter all call _assertInitialized, which throws if this.googleMap is still unset. It prevents calling Maps API methods on a not-yet-created map object.","triggerScenarios":"Calling fitBounds, panBy, panTo, panToBounds, getBounds, or getCenter on a <google-map> reference before the async map initialization completed (e.g. synchronously in the parent's ngAfterViewInit).","commonSituations":"Adjusting the viewport right after creating the map in a component; running map queries in unit tests without waiting; slow network delaying the Maps script so user code races the map creation.","solutions":["Await the map instance via the component's exposed promise (e.g. _resolveMap()) before calling methods.","Queue viewport operations inside the promise callback.","Subscribe to map events (e.g. bounds_changed / initialization) before interacting.","In tests, await test harness stability or the resolve promise."],"exampleFix":"// before\nconst center = this.map.getCenter();\n// after\nthis.map._resolveMap().then(() => {\n  const center = this.map.getCenter();\n});","handlingStrategy":"try-catch","validationCode":"async function whenMapReady(map: any) {\n  await map._resolveMap();\n  return map;\n}\n// usage: const m = await whenMapReady(mapComponent); m.fitBounds(bounds);","typeGuard":"function isMapReady(c: any): c is {googleMap: google.maps.Map} {\n  return c?.googleMap != null;\n}","tryCatchPattern":"try {\n  this.map.panTo(latLng);\n} catch (e) {\n  if (String((e as Error).message).includes('before the API has been initialized')) {\n    this.map._resolveMap().then(() => this.map.panTo(latLng));\n  }\n}","preventionTips":["Always await _resolveMap() before any viewport or query method.","Trigger map interactions from map-initialized events, not lifecycle hooks directly.","Queue early operations and flush them after initialization.","In tests, await the initialization promise before assertions."],"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"}