Angular2でgMapsを使用するにはどうすればよいですか？それは可能ですか？

Question

都市などのための先読みサービスを作成する必要があります。 同時に、私はtypeaheadディレクティブ（ng2-bootstrap）を使う必要があるので、私は私のサービスによって与えられる文字列の配列が必要です。

私はそれのためのGoogleマップを使用することに決めました。このコードは、Google Maps APIを

function initAutocomplete() { 
    // Create the autocomplete object, restricting the search to geographical 
    // location types. 
    autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
    {types: ['geocode']}); 

    // When the user selects an address from the dropdown, populate the address 
    // fields in the form. 
    autocomplete.addListener('place_changed', fillInAddress); 
} 

の例から取った

私はどのように私はそれを行うことができます... Angular2でそれを使用する必要がありますか？それは可能ですか？

ありがとうございました！

Answer 1

イベントに関連付けられたコールバックからオブジェクトを設定します。ここにサンプルがある：このオブジェクトに対する

autocomplete.addListener('place_changed',() => { 
    this.selectedPlace = autocomplete.getPlace(); 
}); 

とフォームをバインド

<form> 
    Name: <input [(ngModel)]="selectedPlace.name"/> 
    (...) 
</form> 

編集

あなたはViewChildデコレータを使用して適用する要素を参照する必要があります。

<div #autocomplete></div> 

eコンポーネント：

@ViewChild('autocomplete') 
autocompleteElt:ElementRef; 

ngAfterViewInit() { 
    this.initAutocomplete(); 
} 

initAutocomplete() { 
    this.autocomplete = new google.maps.places.Autocomplete(
    this.autocompleteElt.nativeElement, 
    {types: ['geocode']}); 
    (...) 
}