RequireJSでgmaps apiをロードするのに苦労しています。これは私が試したものです:
requirejs.config({
urlArgs: "noCache=" + (new Date).getTime(),
paths : {
"jquery": "vendor/jquery-1.8.2.min",
"bootstrap": "vendor/bootstrap.min",
"underscore": "libs/underscore-min",
"backbone": "libs/backbone-min",
"template": "libs/template",
"gmaps": "http://maps.google.com/maps/api/js?v=3&sensor=false"
},
shim: {
'backbone': {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'bootstrap': {
deps: ['jquery']
},
'gmaps': {
deps: ['jquery']
},
'main':{
deps: ['jquery','gmaps']
}
}
});
require(["main"], function (main) {})
しかし、main.js内でジオコーダーをインスタンス化しようとすると、undefinedは関数ではありません」というエラーが表示されます。
var geocoder = new google.maps.Geocoder();
何が間違っているのでしょうか?
async プラグインで整理できました。
簡単な例:
require.config({
paths: {
'async': 'lib/requirejs-plugins/src/async'
}
});
define(['async!http://maps.google.com/maps/api/js?sensor=false'], function() {
// Google Maps API and all its dependencies will be loaded here.
});
User1706254のおかげで公式ドキュメントが作成されました: https://github.com/millermedeiros/requirejs-plugins/ が使用していないキーワード「define」を使用していました私のために働いていますが、「必要」はうまく機能しています。
直接ロードできませんでした:
require(["goog!maps,3,other_params:sensor=false"], function(){});
しかし、非同期の方法を使用してトリックを行いました:
require(['async!http://maps.google.com/maps/api/js?sensor=false'], function(){});
Require.jsでGoogleマップを使用するために非同期プラグインは必要ありません。単純な shim configを使用するだけで目標を達成できます。
require.config({
paths: {
gmaps: '//maps.googleapis.com/maps/api/js?' // question mark is appended to prevent require.js from adding a .js suffix
},
shim: {
gmaps: {
exports: 'google.maps'
}
}
});
require(['gmaps'], function (gmaps) {
var center = {lat: -34.397, lng: 150.644};
var map = new gmaps.Map(document.getElementById('map'), {
center: center,
zoom: 8
});
new gmaps.Marker({
map: map,
position: center
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
<div id="map" style="width: 100%; height: 200px"></div>
Hjusterに続いて、 async プラグインの使用方法の簡単な例を示します
github で利用可能なgoog
プラグイン(asyncとpropertyParserが必要)もあります
Googleマップの使用例:
require(["goog!maps,3,other_params:sensor=false"], function(){});
@hjusterの答えが私を導き、コールバック関数で解決しました。
define(['async!http://maps.google.com/maps/api/js?key=YOURKEY!callback'],
function (_ExpectedMap) {
callback();
});
URLの末尾にある!callbackがasync!で始まることに注意してください、ロード操作の完了時にコールバックメソッドが呼び出されています。
function callback()
{
//Now load google maps API dependant libraries
require(['gmapsLib'], function (googlemaps) {
window.GMaps = googlemaps;
}
}
別の question が最近気づきました。タイムアウトエラーを防ぐために、コールバックの代わりに別の関数(onLoad)が使用されています。面白い。