読者です 読者をやめる 読者になる 読者になる

本当は怖い情報科学

情報系大学院生の趣味&実益ブログ。

Node.js + express + require.jsを使ってGoogle Mapを読み込んでみたメモ。

node.js express require.js

Node.js + express + require.jsを使ってGoogle Mapを読み込んでみた。なお、jqueryプラグインとしてjquery-ui-mapというものがあるが、これは今回用いなかった。理由は、APIがラップされてしまっていて、本家のドキュメントが直に適用できなくなってしまっているためだ。自分のプロジェクトでGoogle Mapを使うのは初めてのため、APIを生で使いたかった。

まず、node.jsを初期化する

$ express googlemap-test

create : googlemap-test
create : googlemap-test/package.json
create : googlemap-test/app.js
create : googlemap-test/public
create : googlemap-test/public/javascripts
create : googlemap-test/public/images
create : googlemap-test/public/stylesheets
create : googlemap-test/public/stylesheets/style.css
create : googlemap-test/routes
create : googlemap-test/routes/index.js
create : googlemap-test/routes/user.js
create : googlemap-test/views
create : googlemap-test/views/layout.jade
create : googlemap-test/views/index.jade

install dependencies:
$ cd googlemap-test && npm install

run the app:
$ node app

ここでは、require.jsとjQueryが結合された require-jquery.js を使う。本家からサンプルパッケージをダウンロードして、その中からrequire-jquery.jsを取り出し、public/javascripts に置いておく。

次に、トップページで読み込むindex.jsを作成する。Require.jsモジュールとして作成してある。

// public/javascripts/index.js
define(['jquery'],
          function(jquery) {
          /**
          * Callback function : update #lat and #lng element value.
          */
          function updateLatLng(map) {
                    latlng = map.getCenter();
                    console.log(latlng);
                    $('#lat').text(latlng.lat());
                    $('#lng').text(latlng.lng());
          }

          /**
          * Callback function for an 'init' event of Google Map
          */
          function gmap_init() {
                    var mapOptions = {
                              zoom : 15,
                              center : new google.maps.LatLng(35.6903, 139.7006),
                              mapTypeId :google.maps.MapTypeId.ROADMAP,
                    };

                    var map = new google.maps.Map($('#map-canvas')[0], mapOptions);

                    // add event listener
                    google.maps.event.addListener(map, 'center_changed', function() {
                              updateLatLng(map);
                    });

                    updateLatLng(map);
            }

          /**
          * Load Google Map Asynchronously
          */
          function load_gmap_async() {
                    // gmap's callback function must be an global function
                    window.gmap_init = gmap_init;

                    // Asynchronously load Google Map
                    var api_key = 'xxxxxxxxxxxn9qpbyVMhYhZ0hQqs';
                    var params = $.param({key : api_key, sensor : 'true', callback : 'gmap_init'});
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = 'http://maps.googleapis.com/maps/api/js?' + params;
                    document.body.appendChild(script);
          }

          load_gmap_async();
          });

次に、実際に表示されるHTMLをJadeテンプレートで作成。

// views/index.jade
extends layout

block content
  h1 jQUeryとRequire.jsによる地図テスト
  div#map-canvas(style="width : 600px; height : 300px;")

  div
    p 緯度
      span#lat
    p 経度
      span#lng

    script.
      var require = {
        urlArgs : 'bust=' + (new Date()).getTime(),
        baseUrl : 'javascripts',
      };
    script(type="text/javascript", src="javascripts/require-jquery.js", data-main="index.js")

最後に npm install を実行した後、nodeサーバーを走らせる。

$ npm install
$ node app

ブラウザで http://localhost:3000/ を開く。

できた!

【広告】