How to Fix the “’capacitor-google-map’ Is Not a Known Element” Error in Angular

When integrating Capacitor Google Maps into your Angular or Ionic application, you might encounter an error like:

'capacitor-google-map' is not a known element:
1. If 'capacitor-google-map' is an Angular component, then verify that it is part of this module.
2. If 'capacitor-google-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component.

This error can be confusing, especially when the setup seems correct. In this article, we’ll explain why this happens, what it means, and how to fix it properly.

Understanding the Error

Angular uses a concept called schemas to determine which HTML elements it recognizes. When you use a Web Component or an Ionic Capacitor custom element (like <capacitor-google-map>), Angular doesn’t automatically know about it — because it’s not part of its internal component registry.

This triggers the “not a known element” error. It’s Angular’s way of saying:

“Hey, I don’t know what this tag means. Are you sure it belongs here?”

Root Cause

The <capacitor-google-map> element is not a native Angular component — it’s a Web Component provided by the Capacitor Google Maps plugin.

Angular needs to be explicitly told that such custom elements are allowed inside your templates.

Solution 1: Add CUSTOM_ELEMENTS_SCHEMA

To allow custom elements like <capacitor-google-map>, modify your module (e.g., home.module.ts or app.module.ts) as follows:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';

@NgModule({
  declarations: [HomePage],
  imports: [
    CommonModule,
    IonicModule,
    HomePageRoutingModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]  // ✅ This line allows web components
})
export class HomePageModule {}

This tells Angular: “It’s okay to have elements that I don’t recognize.”

Solution 2: Ensure Proper Plugin Installation

Make sure you’ve installed and configured the Capacitor Google Maps plugin correctly.

Run the following commands in your project:

npm install @capacitor/google-maps
npx cap sync

If you’re using native platforms (Android/iOS), also open your platform project and ensure the plugin is correctly registered:

npx cap open android

or

npx cap open ios

Then rebuild your app.

Solution 3: Verify Web Component Registration

In some cases, you need to ensure the Google Maps Web Component is properly defined in your app entry point (for example, in main.ts or polyfills.ts).

Add this import if needed:

import '@capacitor/google-maps';

This ensures that the <capacitor-google-map> tag is registered before Angular starts rendering your templates.

Bonus: Example Integration

Here’s a minimal example of using Capacitor Google Maps inside an Ionic/Angular component:

<ion-content>
  <capacitor-google-map
    id="map"
    style="display: block; width: 100%; height: 100%;"
  ></capacitor-google-map>
</ion-content>

import { Component, AfterViewInit } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
  async ngAfterViewInit() {
    const mapRef = document.getElementById('map')!;
    const map = await GoogleMap.create({
      id: 'my-map',
      element: mapRef,
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
      config: {
        center: { lat: 40.7128, lng: -74.0060 },
        zoom: 12,
      },
    });
  }
}

This example creates a simple map centered on New York City using the Capacitor Google Maps plugin.

Common Mistakes

• ❌ Forgetting to add CUSTOM_ELEMENTS_SCHEMA to your module.
• ❌ Missing the import import '@capacitor/google-maps';.
• ❌ Using <capacitor-google-map> before the plugin is registered.
• ❌ Plugin not synced or platform not rebuilt after installation.

Conclusion

The 'capacitor-google-map' is not a known element error is one of the most common issues developers face when integrating Capacitor plugins with Angular. Fortunately, the fix is simple once you understand how Angular treats custom elements.

By:

• Adding CUSTOM_ELEMENTS_SCHEMA,
• Ensuring proper plugin installation and imports,
• And verifying that your component is declared in the right module,

you’ll have your Google Maps integration running smoothly in no time.