谷歌对象未定义使用angular2谷歌地图和谷歌地方搜索栏 [英] google object undefined using angular2-google-maps and google places searchbar

问题描述

我使用优秀的sebm angular2-google-app来嵌入谷歌地图和实例到应用程序中，地图模块。

我现在遇到的问题是，我想使用google地方的自动完成搜索栏。

 从'@ angular / core'导入{NgModule}; 
从'@ angular / common'导入{CommonModule}; 
从'angular2-google-maps / core'导入{AgmCoreModule}; 
从'./map.component'导入{MapComponent}; 
 $ b @NgModule（{
进口：[
 CommonModule，
 AgmCoreModule.forRoot（{
 apiKey：'********* ***************'，
 libraries：['places'] 
}）
]，
声明：[MapComponent] 
}）
导出类MapModule {} 
  

。但是，我可以找到的所有文档（例如，此线程） google对象现在应该全局存在，我应该能够通过简单地将其声明在我的组件中来获得它，例如

  declare var google：any; 
  

当我尝试这个，然后尝试使用google对象例如

  console.log（google）; 
  

...它给我的错误是google未定义。

直到例如：

构造函数（private _mapsAPILoader：MapsAPILoader） {}

  ngAfterViewInit（）{
 this._mapsAPILoader.load（）。then（（）=> { 
 //将你的代码放在这里... 
}）; 
} 
  

这个答案是通过github的amiller29au curtesy 这里 - 复制以获得更广泛的访问权限。

I am currently working on an angular2 application which uses Google Maps.

I have embedded and instance of Google Maps into the app using the excellent sebm angular2-google-maps module.

The problem I now have is that I would like to use the google place autocomplete search bar.

I have imported the module into my map module like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AgmCoreModule } from 'angular2-google-maps/core';
import { MapComponent } from './map.component';

@NgModule({
  imports: [
    CommonModule,
    AgmCoreModule.forRoot({
      apiKey: '************************',
      libraries: ['places']
    })
  ],
  declarations: [MapComponent]
})
export class MapModule { }

Which works fine re the map itself. However all the documentation I can find ( for example this thread ) says that the 'google' object should exist globally now and that I should be able to get hold of it by simply declaring it in my component i.e.

declare var google: any;

When I try this though and then try to use the google object e.g.

console.log(google);

... it gives me the error that google is undefined.

解决方案

You need to inject the MapsAPILoader into your class, then call the load method.

Until the loader is complete the google object will not be accessible.

Example:

constructor(private _mapsAPILoader: MapsAPILoader) { }

ngAfterViewInit() {
  this._mapsAPILoader.load().then(() => {
    // Place your code in here...
  });
}

This answer was curtesy of amiller29au via github here - replicated for wider access.

这篇关于谷歌对象未定义使用angular2谷歌地图和谷歌地方搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！