{"record":{"id":"90cd94b29c615426","repo":"angular/components","slug":"cannot-interact-with-a-google-map-directions-rende","errorCode":null,"errorMessage":"Cannot interact with a Google Map Directions Renderer before it has been initialized. Please wait for the Directions Renderer to load before trying to interact with it.","messagePattern":"Cannot interact with a Google Map Directions Renderer before it has been initialized\\. Please wait for the Directions Renderer to load before trying to interact with it\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/google-maps/map-directions-renderer/map-directions-renderer.ts","lineNumber":165,"sourceCode":"    this._assertInitialized();\n    return this.directionsRenderer.getRouteIndex();\n  }\n\n  private _combineOptions(): google.maps.DirectionsRendererOptions {\n    const options = this._options || {};\n    return {\n      ...options,\n      directions: this._directions || options.directions,\n      map: this._googleMap.googleMap,\n    };\n  }\n\n  private _assertInitialized(): asserts this is {\n    directionsRenderer: google.maps.DirectionsRenderer;\n  } {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this.directionsRenderer) {\n        throw Error(\n          'Cannot interact with a Google Map Directions Renderer before it has been ' +\n            'initialized. Please wait for the Directions Renderer to load before trying ' +\n            'to interact with it.',\n        );\n      }\n    }\n  }\n}\n","sourceCodeStart":147,"sourceCodeEnd":174,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/map-directions-renderer/map-directions-renderer.ts#L147-L174","documentation":"This error is thrown by the MapDirectionsRenderer component's dev-mode assertion when its internal google.maps.DirectionsRenderer object is still undefined. The Angular Google Maps wrapper creates the renderer asynchronously (after the Google Maps API loads and the component initializes), so any interaction before that is invalid. It exists to give a clear message instead of an opaque 'undefined is not a function' failure.","triggerScenarios":"Calling getDirections(), getPanel(), getRouteIndex(), or setting inputs that call _initialize before the component's ngAfterContentInit flow has created directionsRenderer — e.g. calling these methods in the parent's ngOnInit or immediately after creating the component dynamically.","commonSituations":"Querying directions in a constructor/ngOnInit, rendering the component behind *ngIf that flips without waiting for the map/library load, using @angular/google-maps without waiting for Google Maps API script load, dynamic component creation followed by immediate API calls.","solutions":["Wait for component readiness before calling accessors: subscribe to the map's/overlay's ready output or wrap calls in the component's ngAfterViewInit timing.","Call getDirections/getPanel/getRouteIndex only after the renderer exists — e.g. gate with a check that the component is bound (ComponentFactoryResolver/dynamic creation: use componentRef.instance after view init).","Ensure the Google Maps JS API script has loaded (Loader ready promise or GOOGLE_MAPS_API_CONFIG script tag present) before rendering the component.","If calling from a parent, put the call in ngAfterViewInit of the parent (not ngOnInit) or queue it via setTimeout/queueMicrotask after view init.","Wrap interaction in try-catch as a defensive measure in dev builds since the throw is ngDevMode-gated."],"exampleFix":"// before\nngOnInit() {\n  this.renderer.getDirections({ origin: 'NYC', destination: 'Boston', travelMode: 'DRIVING' });\n}\n// after\nngAfterViewInit() {\n  this.map.ready.subscribe(() => {\n    this.renderer.getDirections({ origin: 'NYC', destination: 'Boston', travelMode: 'DRIVING' });\n  });\n}","handlingStrategy":"validation","validationCode":"if (!rendererRef || !rendererRef.initialized) { /* defer or skip */ }","typeGuard":"function isRendererReady(r: MapDirectionsRenderer | undefined): r is MapDirectionsRenderer & { getDirections: NonNullable<MapDirectionsRenderer['getDirections']> } {\n  return !!r;\n}","tryCatchPattern":"try {\n  renderer.getDirections(req);\n} catch (e) {\n  if ((e as Error).message.includes('Directions Renderer')) {\n    // retry after map ready / queue the request\n  } else { throw e; }\n}","preventionTips":["Call accessors only from ngAfterViewInit or map.ready subscription, never ngOnInit.","Wrap components in *ngIf gated on map readiness.","Subscribe to ready outputs before imperative API calls.","Keep components mounted once initialized; avoid recreating via *ngIf with stale refs.","Verify the Maps API script loads before bootstrapping map-dependent views."],"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"}