私は現在、グーグルマップAPIv3を使用しているウィジェットを構築しています。セットアッププロセスは次のようになります。
- jQueryを挿入します
- HTML構造を挿入します
- googlemaps apiを挿入します（これは、実際のmain.jsをロードするブートストラップ.jsファイルのみをロードします）&&マップデータをロードします
- googlemaps apiが読み込まれるとすぐに、基本的な地図を設定します
- マップデータがロードされたらすぐに、それをマップに適用します（マーカーの設定など）
私の問題は、GoogleAPIの読み込みが完了したときに起動するようにコールバックメソッドを設定できることです。データの読み込みを開始し、マップが読み込まれ、データリクエストが成功（または失敗）したらすぐにデータを適用したいと思います。jQueryのDeferredObjectを使用していますが、コードは次のようになります。
主要部分：
jQuery.when(
fn.getData()
)
.then(function(resolvedArgs) {
gmap.setData(resolvedArgs['data']);
gmap.addMarkerOverlay();
})
.fail(function(jqXHR, textStatus) {
var message = textStatus + ': loading data';
fn.showInfoBox(message);
});
GoogleMapsパート（同一生成元ポリシーの回避策、これは外部スクリプトのロードを担当する関数からの基本的な戻り値です）：
return jQuery.Deferred(function(deferred) {
var scriptTag = document.createElement('script');
scriptTag['type'] = 'text/javascript';
scriptTag['src'] = 'googlemapsapiurl&callback=setupGoogleMap';
scriptTag['async'] = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
scriptTag['onload'] = scriptTag['onreadystatechange'] = function() {
if (!this.readyState || this.readyState === "loaded" || this.readyState === 'complete') {
deferred.resolve();
}
};
}).promise();
2番目のGoogleMapsパート：
var setupGoogleMap = function() {
jQuery('.container').trigger('googleMapsReady');
};
と...
jQuery('.container').on('googleMapsReady', function(event) {
fn.setupGoogleMap();
});
google apiリクエストをどこに置くかわかりません。これは、google側での2段階の読み込みプロセスのようなものだからです。たぶん私はjQueryDeferredのデフォルトの成功resolve（）を防ぐことができます-代わりにgoogleapiコールバックメソッドでDeferredを呼び出して解決しますか？何か案は？