지오 코더 : webpack으로 각도 2에 google이 정의되지 않았습니다.

Question

주소에 위도와 경도를 표시하고 싶습니다. 이 목적으로 angular2-google-maps npm 패키지를 사용했습니다.

import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core'; 
declare var google: any; 
export class ContactComponent 
{ 
    constructor(private _wrapper: GoogleMapsAPIWrapper) 
    { 

    } 

    ngAfterViewInit() { 
    this.getLatLon("115 23 Stockholm Sweden") ; 
    } 

    getLatLon(address: string) { 
    console.log('Getting Address - ', address); 
    let geocoder = new google.maps.Geocoder(); 
    return Observable.create(observer => { 
     geocoder.geocode({ 'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       observer.next(results[0].geometry.location); 
       observer.complete(); 
      } else { 
       console.log('Error - ', results, ' & Status - ', status); 
       observer.next({}); 
       observer.complete(); 
      } 
     }); 
    }) 
    } 
} 

'google is not defined'오류가 발생했습니다. 나는 약간의 구성을 놓친다는 것을 안다. 어떻게 해결할 수 있습니까? 나는 각도 2를 webpack과 함께 사용한다.

응용 프로그램 모듈 :

import { AgmCoreModule } from 'angular2-google-maps/core'; 

    @NgModule({ 
    imports: [ 
    AgmCoreModule.forRoot({ 
    apiKey: 'XXXXXXXXX' 
    })], 
    }) 

Answer 1

구글지도 API 스크립트는 getLatLon() 함수를 호출 할 때로드되지 않는 변경합니다. 그래서 나는 다음과 같은 오류를 던지는 색인 파일에 그것을 포함시켰다.

"Google지도 API를이 페이지에 여러 번 포함 시켰습니다. 예기치 않은 오류가 발생할 수 있습니다."

지도 지시어를 호출하는 동안 google maps api 스크립트가 'angular2-google-maps'에 추가되었으므로 색인 파일에지도 api 참조를 추가하는 것은 불필요합니다. 이것은 위의 오류의 원인이었습니다.

_loader.load().then(() => { 
    console.log('google script loaded'); 
}); 

위의 코드를 앱 구성 요소 생성자에 추가하고 색인 파일에서지도 스크립트를 제거하여 문제를 해결했습니다.

이 스레드를 사용하면 올바른 방향으로 운전할 수있었습니다. https://github.com/SebastianM/angular2-google-maps/issues/689

Answer 2

아래에서 확인하시기 바랍니다는

import {Angulartics2Module, Angulartics2GoogleAnalytics} from 'angulartics2'; 
import {AgmCoreModule, MapsAPILoader, NoOpMapsAPILoader} from 'angular2-google-maps/core'; 
@NgModule({ 
     imports: [... 
     Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])], 
     providers: [.. 
     {provide: MapsAPILoader, useClass: NoOpMapsAPILoader}] 
    });