angular/components · critical

Namespace google not found, cannot construct embedded google

Error message

Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API

What it means

GoogleMap's constructor checks window.google as soon as it runs in the browser. The component does not load the Maps JS API itself; it expects the API (and the global google namespace) to be present. If not, it throws immediately, telling you to load the Maps JavaScript API.

Source

Thrown at src/google-maps/google-map/google-map.ts:255

   */
  @Output() readonly tiltChanged: Observable<void> =
    this._eventManager.getLazyEmitter<void>('tilt_changed');

  /**
   * See
   * https://developers.google.com/maps/documentation/javascript/reference/map#Map.zoom_changed
   */
  @Output() readonly zoomChanged: Observable<void> =
    this._eventManager.getLazyEmitter<void>('zoom_changed');

  constructor() {
    const platformId = inject<Object>(PLATFORM_ID);
    this._isBrowser = isPlatformBrowser(platformId);

    if (this._isBrowser) {
      const googleMapsWindow: GoogleMapsWindow = window;
      if (!googleMapsWindow.google && (typeof ngDevMode === 'undefined' || ngDevMode)) {
        throw Error(
          'Namespace google not found, cannot construct embedded google ' +
            'map. Please install the Google Maps JavaScript API: ' +
            'https://developers.google.com/maps/documentation/javascript/' +
            'tutorial#Loading_the_Maps_API',
        );
      }

      this._existingAuthFailureCallback = googleMapsWindow.gm_authFailure;
      googleMapsWindow.gm_authFailure = () => {
        if (this._existingAuthFailureCallback) {
          this._existingAuthFailureCallback();
        }
        this.authFailure.emit();
      };
    }
  }

  ngOnChanges(changes: SimpleChanges<this>) {

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add the Google Maps JS API script tag before the app renders the component (with your API key).
2. Use a loader library like @googlemaps/js-api-loader, await its load(), then render the map component (e.g. via *ngIf).
3. Verify the script actually executes (check network tab, CSP, ad blockers).
4. For SSR, gate rendering with isPlatformBrowser and ensure client-side loading.

Example fix

// before
<google-map ...></google-map> // API script never loaded
// after
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
<google-map ...></google-map>

function isGoogleMapsLoaded(): boolean {
  return typeof (window as any).google?.maps === 'object';
}
// in app init:
if (!isGoogleMapsLoaded()) throw new Error('Load the Google Maps JS API before rendering <google-map>');

function hasGoogleMaps(w: Window): w is Window & {google: {maps: any}} {
  return typeof (w as any).google?.maps === 'object';
}

try {
  this.map.getCenter();
} catch (e) {
  if (String((e as Error).message).includes('Namespace google not found')) {
    await loadGoogleMapsScript();
  }
}

When it happens

Trigger: Rendering <google-map> in the browser when window.google is undefined — the Maps JS API script was not loaded or loaded after component construction.

Common situations: Using the component without the Maps JS API script tag (or missing API key/loader); lazy loading the script after Angular initializes the component; SSR-to-client hydration where the script tag is missing on the client; script blocked by CSP or network/ad blockers.

Related errors

• MarkerClusterer class not found, cannot construct a marker c
• Maps event target that uses native events must have `addEven
• Cannot interact with a MarkerClusterer before it has been in
• Cannot access Google Map information before the API has been
• Cannot interact with a Google Map Marker before it has been

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/08d701dc4c3f5baa. Report an issue: GitHub.