角度5 - Googleが定義されていません（Googleマップ）

Question

私のAngular 5アプリでGoogleマップを使用したいと思いますが、私はいくつかの問題を抱いていました。

ビューは、私はJSコンソールにエラーが表示されるロードされます。

LoginComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined 
at LoginComponent.ngAfterViewInit (login.component.ts:15) 
at callProviderLifecycles (core.js:12428).. 

マイコンポーネント：

import {AfterViewInit, Component} from '@angular/core'; 
    declare let google: any; 

    @Component({ 
     selector: 'app-login', 
     templateUrl: './login.component.html', 
     styleUrls: ['./login.component.css'] 
    }) 
    export class LoginComponent implements AfterViewInit { 

     ngAfterViewInit(): void { 
      let origin = new google.maps.LatLng(4.0, 2.0); 
      let destination = new google.maps.LatLng(1.0, 1.5); 
     } 

     constructor() {} 
    } 

app.module.ts

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

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AppRoutingModule, 
    AgmCoreModule.forRoot({ 
     apiKey: 'KEY' 
    }) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

を私はインストールAgmCoreModuleを使用していますnpm単位：

npm install @agm/core --save 

私はまたLatLangクラスをこのようにインポートしようとした：

import LatLng = google.maps.LatLng; 

そして、私のindex.htmlに

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script> 

しかし、私は同じ問題を受け、すべての時間をスクリプトを使用します。 何か不足していますか？

Answer 1

agm/core負荷は、モジュールのインポート中に、あなたのAPIキーを設定しますので、あなたが彼らがtutorialを始めるフォロー<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>

を必要としない& Googleマップ。あなたは

<agm-map [latitude]="lat" [longitude]="lng"> 
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> 
</agm-map> 

Answer 2

のようなものになってしまいますGoogleマップからキーを取得し、その後@NgModule

AgmCoreModule.forRoot({ 
    apiKey: 'your key generated from google maps' 
}); 

下app.module.tsでそのキーを配置し、HTMLにこの

<agm-map [latitude]="lat" [longitude]="lng"> 
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> 
</agm-map> 

を追加

これもCSS

agm-map { 
    height: 300px; 
}