Googleプレイスオートコンプリート非同期アングル2を読み込み中

Googleプレイスオートコンプリート入力をアングル2コンポーネント内でインスタンス化しようとしています。私はそれを行うには、このコードを使用します。Googleプレイスオートコンプリート非同期アングル2を読み込み中

loadGoogle() { 
    let autocomplete = new google.maps.places.Autocomplete((this.ref.nativeElement), { types: ['geocode'] }); 
    let that = this 
    //add event listener to google autocomplete and capture address input 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     let place = autocomplete.getPlace(); 
     that.place = place; 
     that.placesearch = jQuery('#pac-input').val(); 
    }); 
    autocomplete.addListener() 
    }

通常、私は、この関数を実行する前に、それがロードされていることを確認するために、GoogleのAPIが提供するコールバック関数を使用することになり、信じて、私はそれへのアクセスを持っていませんコンポーネントのスコープ内で私は、時間のオートコンプリート入力の90％をロードすることができていますが、低速の接続で私は時々

google is not defined

とアウトエラー、誰もが、GoogleのAPIをインスタンス化する前に、コンポーネント内にロードされていることを確認する方法を考え出し持っています。

出典

2016-05-19 C. Kearns

こんにちはC. Kearns、角度2のgoogleマップで使用しているapiライブラリはどれですか？ –

Googleはオートコンプリートを開催します。問題は持続しており、まだ適切な解決策を見つけることはできていません。 –

私はそれを同じように使用し、

レンダリングブロックJavaScriptを削除します： http://maps.googleapis.com/ ... es =ジオメトリ、場所&地域= IN &言語= en

は、だから私は、あなたはもう一つのことを行うことができ、

<body> 
    <app-root></app-root> 
    <script src="http://maps.googleapis.com/maps/api/js?client=xxxxx2&libraries=geometry,places&region=IN&language=en" async></script> 
</body>

/*今私のcomponent.ts中*/

triggerGoogleBasedFn(){ 
    let _this = this; 

    let interval = setInterval(() => { 
     if(window['google']){ 
     _this.getPlaces(); 
     clearInterval(interval); 
     } 
    },300) 
    }

を私の実装を変更した値（グーグル）が受信されると、イベントを発する、&あなたのGoogleタスクをそれらの中に誘発してください。

出典

2016-11-03 11:25:16 Manish

これが役立つかどうかはわかりませんが、Google APIを読み込むためにindex.htmlに単純なスクリプトタグを使用していますが、エラーは発生しません。私はあなたも同じことをすると信じています。私はここに私のコードを掲載、それが助けて欲しい。

注：Google Map APIを除き、Webpackを使用して他のスクリプトを読み込みます。

<html> 
    <head> 
    <base href="/"> 
    <title>Let's Go Holiday</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Google Map --> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your-key>&libraries=places"></script> 
    </head> 

    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

そして、あなたのコンポーネントで：上記で説明したが、Googleのページスピードあたりとして、私はこの提案を得ていたとして

... 
declare var google: any; 

export class SearchBoxComponent implements OnInit { 

    ngOnInit() { 
    // Initialize the search box and autocomplete 
    let searchBox: any = document.getElementById('search-box'); 
    let options = { 
     types: [ 
     // return only geocoding results, rather than business results. 
     'geocode', 
     ], 
     componentRestrictions: { country: 'my' } 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(searchBox, options); 

    // Add listener to the place changed event 
    autocomplete.addListener('place_changed',() => { 
     let place = autocomplete.getPlace(); 
     let lat = place.geometry.location.lat(); 
     let lng = place.geometry.location.lng(); 
     let address = place.formatted_address; 
     this.placeChanged(lat, lng, address); 
    }); 
    } 
    ... 
}

出典

2016-05-19 09:21:29 Andyccs

アプリの下にスクリプトタグがありますが、それはおそらく問題です！ –

こんにちは@Andyccs、あなたの答えをありがとうが、私は入力するために複数のフィールドを使用するとどうなるのだろうか？正常に動作しますか？ –

Googleプレイスオートコンプリート非同期アングル2を読み込み中

答えて

関連する問題