{"record":{"id":"b3f782c8457b27d4","repo":"angular/components","slug":"markerclusterer-class-not-found-cannot-construct","errorCode":null,"errorMessage":"MarkerClusterer class not found, cannot construct a marker cluster. Please install the MarkerClustererPlus library: https://github.com/googlemaps/js-markerclustererplus","messagePattern":"MarkerClusterer class not found, cannot construct a marker cluster\\. Please install the MarkerClustererPlus library: https://github\\.com/googlemaps/js-markerclustererplus","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.ts","lineNumber":225,"sourceCode":"   * See\n   * googlemaps.github.io/v3-utility-library/classes/\n   * _google_markerclustererplus.markerclusterer.html\n   */\n  markerClusterer?: MarkerClustererInstance;\n\n  /** Event emitted when the clusterer is initialized. */\n  @Output() readonly markerClustererInitialized: EventEmitter<MarkerClustererInstance> =\n    new EventEmitter<MarkerClustererInstance>();\n\n  ngOnInit() {\n    if (this._canInitialize) {\n      this._ngZone.runOutsideAngular(() => {\n        this._googleMap._resolveMap().then(map => {\n          if (\n            typeof MarkerClusterer !== 'function' &&\n            (typeof ngDevMode === 'undefined' || ngDevMode)\n          ) {\n            throw Error(\n              'MarkerClusterer class not found, cannot construct a marker cluster. ' +\n                'Please install the MarkerClustererPlus library: ' +\n                'https://github.com/googlemaps/js-markerclustererplus',\n            );\n          }\n\n          // Create the object outside the zone so its events don't trigger change detection.\n          // We'll bring it back in inside the `MapEventManager` only for the events that the\n          // user has subscribed to.\n          this.markerClusterer = this._ngZone.runOutsideAngular(() => {\n            return new MarkerClusterer(map, [], this._combineOptions());\n          });\n\n          this._assertInitialized();\n          this._eventManager.setTarget(this.markerClusterer);\n          this.markerClustererInitialized.emit(this.markerClusterer);\n        });\n      });","sourceCodeStart":207,"sourceCodeEnd":243,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.ts#L207-L243","documentation":"DeprecatedMapMarkerClusterer wraps the external MarkerClustererPlus library. In ngOnInit, once the Google Map resolves, the component checks that a global MarkerClusterer constructor exists; if the library was never loaded, it cannot construct the cluster and throws. This is a missing-dependency error, not an Angular bug.","triggerScenarios":"Rendering <map-marker-clusterer> in the browser when window.MarkerClusterer is undefined because MarkerClustererPlus was never imported or loaded before the map resolves.","commonSituations":"Forgetting to add the js-markerclustererplus package or its <script> tag; loading the clustering script lazily after Angular initializes; SSR/browser platform checks where script injection failed; upgrading google-maps components without migrating to @googlemaps/markerclusterer.","solutions":["Install MarkerClustererPlus: npm install @googlemaps/markerclustererplus and import it so the global is defined.","Or add the library's script tag before the app bootstraps.","Prefer migrating to the non-deprecated @googlemaps/markerclusterer package with MapAdvancedMarker.","If lazy-loading, ensure the script resolves before the cluster component's ngOnInit."],"exampleFix":"// before\nimport 'google-maps'; // MarkerClustererPlus never imported\n// after\nimport 'google-maps';\nimport '@googlemaps/markerclustererplus/dist/markerclustererplus.min.js'; // or npm package import","handlingStrategy":"validation","validationCode":"if (typeof (window as any).MarkerClusterer !== 'function') {\n  throw new Error('MarkerClustererPlus not loaded: npm i @googlemaps/markerclustererplus and import it before rendering <map-marker-clusterer>.');\n}","typeGuard":"function hasMarkerClusterer(w: Window): w is Window & {MarkerClusterer: Function} {\n  return typeof (w as any).MarkerClusterer === 'function';\n}","tryCatchPattern":"try {\n  await clusterComponent._resolveMap();\n} catch (e) {\n  if (String((e as Error).message).includes('MarkerClusterer')) {\n    await loadScript('https://cdn.jsdelivr.net/npm/@googlemaps/markerclustererplus');\n  }\n}","preventionTips":["Import the MarkerClustererPlus package at app startup before any map components render.","Prefer the modern @googlemaps/markerclusterer package over the deprecated wrapper.","Verify globals exist in a CI smoke test that renders the map once.","If lazy-loading the script, sequence it before component initialization."],"tags":["angular","google-maps","missing-dependency","marker-clusterer","dev-mode"],"backgroundTag":"missing-global-dependency","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}