RequireJSでGoogle Maps APIを使う

今日はマーヴィン・ゲイの命日だそうですね。素晴らしい名曲の数々をありがとう！minamiです。
JavaScriptをモジュール化して読み込みの制御をできるRequireJS、便利ですが、Google Maps APIを使うときちょっとつまづいたので解決法を調べてみました。

今回のファイル構成は以下です。

├── index.html
└── js
       ├── main.js
       ├── jquery-1.9.1.min.js
       ├── google.js
       ├── async.js
       └── require.js

index.html

<script type="text/javascript" data-main="js/main" src="js/require.js" /></script>

div#map 内にGoogle Mapsを表示させたい、Google Mapsを表示させる処理はファイルを分割して持ちたい、とします。JSの読み込み制御はRequireJSで行うため、scriptタグでの読み込みはrequire.jsのみにし、data-main属性でmain.jsを指定します。

main.js

requirejs.config({
  paths: {
    jquery: "lib/jquery-1.9.1.min",
    async: "lib/async",
    google: "google"
  }
});

require(["jquery","google"],function($,google) {
  var map = $('#map').get(0);
  google.addMapToCanvas(map);
});

メインの処理です。Google Mapsに関する処理をgoogle.jsに分割してモジュール化しています。

google.js

define(
  [ "async!http://maps.google.com/maps/api/js?sensor=true!callback" ],
  function() {
    return {
      addMapToCanvas: function( mapCanvas ) {
        var myOptions = {
          center: new google.maps.LatLng( 35.447068, 139.634437 ),
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map( mapCanvas, myOptions );
      }
    };
  }
);

Google Mapsを追加する処理をモジュール化しています。ポイントはAPIの読み込み部分で、ただGoogle MapsのAPIを読み込みしても動作しません。Google Maps API自体が非同期で通信を行うため、単純に読み込みをしただけでは依存する処理が動かないようです。その問題を解消するプラグインが以下の中にあるasync.jsです。

• RequireJS plugins

上記のように、async.jsを読み込みつつコールバックにGoogle Maps APIのURLを指定します。

"async!http://maps.google.com/maps/api/js?sensor=true!callback"

結果

• RequireJS & Google Maps のサンプル

動いた！

まとめ

モジュール化しておくと再利用もしやすくて便利ですね。