Cannot interact with a Google Map Polygon before it has been

Error message

Cannot interact with a Google Map Polygon before it has been initialized. Please wait for the Polygon to load before trying to interact with it.

What it means

Thrown by MapPolygon's dev-mode assertion when its internal google.maps.Polygon is still undefined. The polygon is constructed asynchronously once the map and path inputs are ready. The guard converts a would-be TypeError into an actionable error during development.

Source

Thrown at src/google-maps/map-polygon/map-polygon.ts:260

    this._options.pipe(takeUntil(this._destroyed)).subscribe(options => {
      this._assertInitialized();
      this.polygon.setOptions(options);
    });
  }

  private _watchForPathChanges() {
    this._paths.pipe(takeUntil(this._destroyed)).subscribe(paths => {
      if (paths) {
        this._assertInitialized();
        this.polygon.setPaths(paths);
      }
    });
  }

  private _assertInitialized(): asserts this is {polygon: google.maps.Polygon} {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      if (!this.polygon) {
        throw Error(
          'Cannot interact with a Google Map Polygon before it has been ' +
            'initialized. Please wait for the Polygon to load before trying to interact with it.',
        );
      }
    }
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

Call polygon accessors only after map ready / ngAfterViewInit.
Set polygon state via inputs (options, path) rather than reading getters immediately after creation.
Ensure the polygon is inside a MapComponent and the API script loaded.
If mutating and reading, do it from a Google Maps event (e.g. path changed) rather than synchronously after set.
Use try-catch around accessors as a dev-time guard.

Example fix

// before
const path = this.polygon.getPath(); // throws if too early
// after
this.map.ready.subscribe(() => {
  const path = this.polygon.getPath();
});

Defensive patterns

Strategy: validation

Validate before calling

if (!polygonRef) { /* defer */ }

Type guard

function isPolygonReady(p: MapPolygon | undefined): p is MapPolygon { return !!p; }

Try / catch

try {
  const path = polygon.getPath();
} catch (e) {
  if ((e as Error).message.includes('Google Map Polygon')) {
    // retry after map ready
  } else { throw e; }
}

Prevention

Access polygon getters after map ready.
Update paths via inputs and read back from map events.
Ensure polygon is inside MapComponent.
Verify API script loads.
Don't create-and-read in one tick.

When it happens

Trigger: Calling getDraggable(), getEditable(), getPath(), getPaths(), getVisible(), or init paths before polygon construction — e.g. in ngOnInit, before map ready, or when the polygon component is not within an initialized MapComponent.

Common situations: Reading polygon state right after render, updating paths and immediately reading them back, Maps API still loading, conditional rendering with stale component references.

Related errors

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