googleのオブジェクトは、angle2-google-mapsとgoogle-mapsbarを使って未定義です。

Question

私は現在、Google Mapsを使用しているangle2アプリケーションで作業しています。

私は、優れたsebm angular2-google-mapsモジュールを使用して、アプリにGoogleマップの埋め込みとインスタンスを持っています。

私が今問題になっているのは、Googleプレイスのオートコンプリート検索バーを使用したいということです。

私はこのように私のマップモジュールにモジュールをインポートしています：マップ自体の再正常に動作します

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 { } 

を。しかし、私は見つけることができるすべてのドキュメントは、（例えば、このthread）「GOOGLE」オブジェクトは、現在世界的に存在しなければならないことと、私は単に

declare var google: any; 

すなわち私のコンポーネントでそれを宣言することによって、それを手に入れることができるはずと述べています私はこれをしようとし、次にGoogleオブジェクトを使用しようとすると

console.log(google); 

... Googleには定義されていないというエラーが表示されます。

Answer 1

MapsAPILoaderをクラスに挿入してから、loadメソッドを呼び出す必要があります。

ローダーが完了するまで、Googleオブジェクトにアクセスすることはできません。

例：

コンストラクタ（プライベート_mapsAPILoader：MapsAPILoader）{}

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

この回答はgithubのhere介しamiller29auのcurtesyた - 広いアクセスのために複製。

Answer 2

index.htmlがロードされた後の角度実行。 ngOnInitに何かを入れた方が良いでしょう（おそらくngAfterViewInit）。document.readyはすでに解雇されているはずです。

これは間違っている可能性があります。スクリプトタグにgoogleライブラリを取得するasyncまたはdeferタグがある場合です。

さらに良い解決策は、nodeを使用してGoogleマップをインストールし、必要に応じて（googlemapsキーを使用して）Googleライブラリを取得するために使用するローダーを設定することです。次に、PlacesComponentにimport "googlemaps"を入れて、ライブラリがロードされていることを確認します。

Answer 3

ngAfterViewInitイベントハンドラでオブジェクトを使用できます。ビューがロードされた後に起動されます。