如何在@agm/core中使用谷歌地图的Client ID与签名替代API Key？

Nice question! I’ve dealt with this exact requirement when working on enterprise Angular apps that use Google Maps’ Client ID authentication instead of standard API keys. Here’s a solid, tested approach to make this work with @agm/core:

The key here is to bypass @agm/core’s default API key setup by providing a custom map loader that constructs the Google Maps script URL with your Client ID and signature instead.

Step 1: Create a Custom Loader Service #

First, generate a service that implements MapsAPILoader from @agm/core. This service will handle loading the Google Maps script with your enterprise credentials.

import { Injectable } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import { environment } from '../environments/environment'; // Use for env vars

@Injectable()
export class GoogleMapsCustomLoader implements MapsAPILoader {
  private isScriptLoaded = false;

  load(): Promise<void> {
    return new Promise((resolve, reject) => {
      // Skip loading if script is already loaded
      if (this.isScriptLoaded) {
        resolve();
        return;
      }

      // Create the script element
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.defer = true;

      // Build the URL with your Client ID and signature
      const clientId = environment.googleMapsClientId; // Pull from env for security
      const signature = environment.googleMapsSignature;
      const requiredLibraries = 'places,geometry'; // Add any libraries your app needs

      script.src = `https://maps.googleapis.com/maps/api/js?client=${clientId}&signature=${signature}&libraries=${requiredLibraries}`;

      // Handle successful load
      script.onload = () => {
        this.isScriptLoaded = true;
        resolve();
      };

      // Handle load errors
      script.onerror = (error) => {
        reject(new Error(`Failed to load Google Maps script: ${error}`));
      };

      document.body.appendChild(script);
    });
  }
}

Step 2: Configure AgmCoreModule to Use Your Loader #

In your root Angular module (typically app.module.ts), import AgmCoreModule and replace the default loader with your custom one via dependency injection:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgmCoreModule, MapsAPILoader } from '@agm/core';
import { GoogleMapsCustomLoader } from './google-maps-loader.service';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Omit the apiKey parameter in forRoot()
    AgmCoreModule.forRoot()
  ],
  providers: [
    // Override the default MapsAPILoader with our custom service
    { provide: MapsAPILoader, useClass: GoogleMapsCustomLoader }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Validate the Setup #

Run your app and open your browser’s network tab. You should see the Google Maps script request using the client and signature parameters instead of an key parameter.

Key Notes #

• Security Best Practice: Never hardcode your Client ID or signature directly in the service. Use Angular environment variables to keep sensitive values out of your codebase.
• Libraries: Add any Google Maps libraries (like places for autocomplete, geometry for spatial calculations) to the libraries query parameter as needed.
• Error Handling: The custom loader includes basic error handling—you can extend this to show user-friendly messages if the map fails to load.

内容的提问来源于stack exchange，提问作者Ketu