angular2-google-maps autocomplete not working

Question

私は自分のプロジェクトにangular2-google-mapsを使ってオートコンプリートを追加しようとしています。私はAppModuleにAgmCoreModule.forRoot（ライブラリ： 'places'）を追加して、コンポーネントにオートコンプリートコードを追加しました。それでも私は "未定義のAutocomplete 'プロパティを読み取ることができません"エラーが発生します。グローバル変数googleの値をチェックしようとしましたが、google.mapには 'places'フィールドが含まれていません。私はangular2には比較的新しいので、私が紛失しているものを理解するには何らかの助けが必要です。私のコードはAppModuleに です
'{AngmCoreModule} from' angular2-google-maps/core '; AppComponentで

@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ 
     App, 
     ErrorComponent, 
    ], 
    imports: [ // import Angular's modules 
    AgmCoreModule.forRoot({ 
      apiKey: '[API_KEY_REDACTED]', 
      libraries: ["places"] 
     }), 
     BrowserModule, 

     FormsModule, 
     ReactiveFormsModule, 
     HttpModule, 
     TranslateModule.forRoot(), 
     RouterModule.forRoot(ROUTES, { useHash: true }) 
    ], 
    providers: [ // expose our Services and Providers into Angular's dependency injection 
     ENV_PROVIDERS, 
     APP_PROVIDERS, 
    ] 
}) 
export class AppModule { 

：だから

import {MapsAPILoader} from 'angular2-google-maps/core'; 
import { NgZone   } from '@angular/core'; 
declare var google: any; 
export class EventInfoTab { 
    @ViewChild('gmap') gmap:any; 
constructor(
     private _loader: MapsAPILoader, 
     private zone   : NgZone, 
) 
ngAfterViewInit(): void { 
     this._loader.load().then(() => { 
     let address = document.getElementById("location"); 
     console.log("google", google); 
      let autocomplete = new google.maps.places.Autocomplete(address, {}); 
      console.log ("autocomplete",autocomplete); 
      google.maps.event.addListener(autocomplete, 'place_changed',() => { 
     this.zone.run(() => { 
      console.log ("autocomplete place_changed",autocomplete); 
      var place = autocomplete.getPlace(); 
      this.lat = place.geometry.location.lat(); 
      this.lng = place.geometry.location.lng(); 
      //alert(JSON.stringify(place)); 
      this.markers[0] ={ 
          lat: this.lat, 
          lng: this.lng, 
          label: 'x', 
          draggable: false 
          }; 
       });       

       }); 
      });.... 

Answer 1

、私はそれを動作させることができました。私は、メインコンポーネントからルーティングした後に、フィーチャーコンポーネントにオートコンプリートを含むマップを含めることを試みていました。私は、アプリのmodule.tsからコード

'AgmCoreModule.forRoot({ 
      apiKey: '[API_KEY_REDACTED]', 
      libraries: ["places"] 
     }),' 

を削除し、機能のmodule.ts輸入にこれを追加しましたし、それが働きました。

Answer 2

プージャは彼女の作業を持って、私はすでに彼女のためAngular2 +のangular2-グーグルマップ+オートコンプリートの作業例を完了していた、私は似たようなを探して将来の開発者を助けるためにここにコードを追加しようと思いましたので、 。バージョン1.0.0 -beta.0で

import { 
    Component, 
    NgModule, 
    OnInit, 
    NgZone 
} from '@angular/core'; 

import { 
    BrowserModule 
} from '@angular/platform-browser'; 

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

declare var google: any; 

@Component({ 
    selector: 'my-app', 
    styles: [` 
    .sebm-google-map-container { 
     height: 300px; 
    } 
    `], 
    template: ` 
    <sebm-google-map 
     [latitude]="lat" 
     [longitude]="lng" 
     [zoom]="zoom" 
     [disableDefaultUI]="false" 
     [zoomControl]="true"> 

     <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index" 
      (markerClick)="clickedMarker(m.label, i)" 
      [latitude]="m.lat" 
      [longitude]="m.lng" 
      [label]="m.label" 
      [markerDraggable]="m.draggable" 
      (dragEnd)="markerDragEnd(m, $event)"> 

     <sebm-google-map-info-window> 
      <strong>InfoWindow content</strong> 
     </sebm-google-map-info-window> 

     </sebm-google-map-marker> 

    </sebm-google-map> 
    <input type="text" id="autocompleteInput"> 
`}) 
export class App implements OnInit { 

    constructor(
    private _loader: MapsAPILoader, 
    private _zone: NgZone) { 
    } 

    ngOnInit(): void { 
    this.autocomplete(); 
    } 

    autocomplete() { 
    this._loader.load().then(() => { 
     var autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocompleteInput"), {}); 
     google.maps.event.addListener(autocomplete, 'place_changed',() => { 
      this._zone.run(() => { 
       var place = autocomplete.getPlace(); 

       this.markers.push({ 
       lat: place.geometry.location.lat(), 
        lng: place.geometry.location.lng(), 
        label: place.name, 
       }); 

       this.lat = place.geometry.location.lat(); 
       this.lng = place.geometry.location.lng(); 

       console.log(place); 
      }); 
     }); 
    }); 
    } 

    // google maps zoom level 
    zoom: number = 8; 

    // initial center position for the map 
    lat: number = 51.673858; 
    lng: number = 7.815982; 

    clickedMarker(label: string, index: number) { 
    console.log(`clicked the marker: ${label || index}`) 
    } 

    mapClicked($event: MouseEvent) { 
    this.markers.push({ 
     lat: $event.coords.lat, 
     lng: $event.coords.lng 
    }); 
    } 

    markerDragEnd(m: marker, $event: MouseEvent) { 
    console.log('dragEnd', m, $event); 
    } 

    markers: marker[] = []; 
} 
// just an interface for type safety. 
interface marker { 
    lat: number; 
    lng: number; 
    label?: string; 
    draggable: boolean; 
} 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    AgmCoreModule.forRoot({ 
     libraries: ['places'] 
    }) 
    ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Working Plnkr

2017年4月17日UPDATE

- 緑 - シマウマ、AGMチームは、ネーミングとの互換性に影響する変更をリリース以下のようにテンプレートファイルを更新する必要があります：

<agm-map 
    [latitude]="lat" 
    [longitude]="lng" 
    [zoom]="zoom" 
    [disableDefaultUI]="false" 
    [zoomControl]="true"> 

    <agm-marker 
     *ngFor="let m of markers; let i = index" 
     (markerClick)="clickedMarker(m.label, i)" 
     [latitude]="m.lat" 
     [longitude]="m.lng" 
     [label]="m.label" 
     [markerDraggable]="m.draggable" 
     (dragEnd)="markerDragEnd(m, $event)"> 

    <agm-info-window> 
     <strong>InfoWindow content</strong> 
    </agm-info-window> 

    </agm-marker> 

</agm-map> 
<input type="text" id="autocompleteInput"> 

上記のplnkr/codeの更新版は、GitHub repoにあります。