Google Maps APIを読み込んでember.jsビューで初期化する

Question

私はGoogleマップのEmberビューを作成し、オンデマンドで、つまり非同期的にAPIを読み込むようにスクリプトをロードしようとしています。

ビュー内に2つの機能があります.1つはGoogle Maps APIを読み込むためのもので、もう1つは地図の初期化です。しかし、GoogleではAPIを必要とするリンクを介してコールバック関数を呼び出す必要があるためです。しかしEmber.JSでは、私は正しい結果を得ることができませんでした。私が持っているのは、マップを初期化しようとしているときにオブジェクト "google"が定義されていないというエラーメッセージです。

ここにEmberの表示コードがあります。

App.MapsView = Ember.View.extend({ 

templateName: 'maps', 
map: null, 

didInsertElement: function() { 
    this._super(); 
    this.loadGoogleMapsScript(); 
}, 

initiateMaps:function(){ 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(this.$().get(0), mapOptions); 
    this.set('map',map); 
}, 

loadGoogleMapsScript: function(){ 
    var map_callback = this.initiateMaps(); 

    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback'; 
    document.body.appendChild(script); 
}, 

}）;

どのようにこのコールバックの問題を解決するためのアイデアですか？そして、地図を初期化する最適な方法は何ですか？それはテンプレートかJSから来るべきですか？

ありがとうございます。

Answer 1

ここには2つの問題があります。

var map_callback = this.initiateMaps(); 

この呼び出しは未定義googleエラーにつながる、地図APIがロードされる前に行われます。一つは、あなたがこの行にあなたinitiateMaps()関数を呼び出していることです。

もう1つの問題は、map_callbackがこの機能にとってローカルであることです。 Maps APIスクリプトURLで使用されるコールバックは、グローバル関数でなければなりません。

（あなたはこの問題を自分で解決しました。私は、将来の訪問者の利益のためにそれをここに追加している。）

これらの問題の両方のための修正がにその行を変更することです：

var self = this; 
window.map_callback = function() { 
    self.initiateMaps(); 
} 

これを行うにはもっと "ネイティブ"なEmberの方法があるかもしれませんが、それはどんな場合でもそのトリックを行うべきです。

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback'; 
document.body.appendChild(script); 

：あなたはエンバーと一緒にjQueryを使用しているので、

また、あなたはこのコードを置き換えることができます

$.getScript('https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback');