Namespace google not found, cannot construct embedded…

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.

Solutions

Add the Google Maps JS API script tag before the app renders the component (with your API key).
Use a loader library like @googlemaps/js-api-loader, await its load(), then render the map component (e.g. via *ngIf).
Verify the script actually executes (check network tab, CSP, ad blockers).
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>

Defensive patterns

Strategy: validation

Validate before calling

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>');

Type guard

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

Try / catch

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

Prevention

Load the Maps JS API script (with API key) before the app renders any map component.
Use *ngIf="apiLoaded" so <google-map> renders only after the script loads.
Monitor network/CSP/ad-blocker issues that can block the script.
Gate rendering with isPlatformBrowser in SSR apps.

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

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

Appendix: 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)