Angular 5集成Google Places自动补全报错：TypeError: Cannot read property 'maps' of undefined

我之前也踩过一模一样的坑，咱们一步步来排查和解决：

1. 补上最容易漏掉的AGM库配置 #

Google Places自动补全属于Maps的扩展库，必须在AGM初始化时显式声明加载它。打开你的app.module.ts，确保AgmCoreModule的配置里包含places库：

import { AgmCoreModule } from '@agm/core';

@NgModule({
  imports: [
    // 其他模块...
    AgmCoreModule.forRoot({
      apiKey: '你的Google Maps API密钥',
      libraries: ['places'] // 这一行是关键！必须加
    })
  ]
})
export class AppModule { }

2. 修正类型导入的冗余错误 #

@types/googlemaps已经为全局环境声明了google对象，不需要再从@agm/core里单独导入。把组件里的导入语句改成这样：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import {} from '@types/googlemaps'; // 只保留这一行引入类型定义即可

如果还没安装@types/googlemaps，先执行这个命令：

npm install @types/googlemaps --save-dev

3. 确认DOM元素引用正确 #

你代码里的this.searchElement.nativeElement需要对应模板里的输入框，必须用@ViewChild获取正确的DOM引用：
在组件类里添加：

@ViewChild('search') searchElement: ElementRef;

然后在组件模板里添加对应的输入框：

<input #search type="text" placeholder="输入地址搜索" />

4. 优化ngOnInit逻辑 #

调整你的初始化代码，确保逻辑更严谨：

ngOnInit() {
  this.mapsAPILoader.load().then(() => {
    const autoComplete = new google.maps.places.Autocomplete(
      this.searchElement.nativeElement,
      { types: ['address'] }
    );

    autoComplete.addListener('place_changed', () => {
      this.ngZone.run(() => {
        const place: google.maps.places.PlaceResult = autoComplete.getPlace();
        
        // 校验地址有效性
        if (!place.geometry || !place.geometry.location) {
          console.error('获取的地址无效，请重新输入');
          return;
        }

        // 这里可以处理地址数据，比如打印经纬度
        console.log('地址纬度:', place.geometry.location.lat());
        console.log('地址经度:', place.geometry.location.lng());
      });
    });
  });
}

可选：全局类型配置（解决类型提示问题） #

如果还是遇到类型提示异常，可以在tsconfig.json的compilerOptions里添加googlemaps到类型数组：

{
  "compilerOptions": {
    // 其他配置...
    "types": ["googlemaps"]
  }
}

按这些步骤操作后，google对象未定义的问题应该就能解决了！

内容的提问来源于stack exchange，提问作者M. Gamie