realtimeGTFSのデータを取得しグーグルマップに表示する

#訂正
monaca localkitを使用していますが、使用しなくてもApacheがあればできました。
（色々な理由で、XAMPPが入っていたので検証しました。）

~~XAMPP　＋　Chromeのデベロッパーモードがあればモバイル向け画面開発もできました。~~
localhostでの接続だと、オリジン間リソース共有 (CORS) の関係ではねられるためできていません。
誰か教えてください

#前書き
忘れないための覚書（なので他環境での動作確認はわかりませんし、正攻法なのかもわかりません）

リアルタイムGTFSをマッピングしたくてGoogleのチュートリアルを見ても、Node.jsの知識もなく、プログラミング初心者で当たり前っぽいことも理解できていなく、四苦八苦した話。

リアルタイムGTFSについては、https://developers.google.com/transit/gtfs-realtime/

あと実行環境
アプリケーションはMONACA（Monaca Localkit)で検証

#準備
~~1.Node.jsのインストール（npmも）
　→　`require(）`を使うため~~ ※ダウンロードしていなくてもできできるかも？
2.[Monaca Localkit](https://ja.monaca.io/localkit.html)のインストール

#環境の構築
本体のコンソール（MONACA　LocalKitのコンソールではないです）で、プロジェクトフォルダにマウントして

1.「protobufjs」インストール
`$　npm install protobufjs`
2.「gtfs-realtime-bindings」インストール
`$　npm install gtfs-realtime-bindings`
3.「request」インストール
`$　npm install request`

#GTFSを読み込むJavascriptファイルの作成
今回は宇野バスのGTFSリアルタイムデータを利用（http://www3.unobus.co.jp/opendata/）

```js:sample.js
var GtfsRealtimeBindings = require('gtfs-realtime-bindings');
var request = require('request');

var requestSettings = {
  method: 'GET',
  url: 'http://www3.unobus.co.jp/GTFS/GTFS_RT-VP.bin',//宇野バス
  encoding: null
};
request(requestSettings, function (error, response, body) {
  console.log("read to data");
  //正しくデータを読み込めたら
  if (!error && response.statusCode == 200) {
    //GTFSのデータ構造については、https://developers.google.com/transit/gtfs-realtime/reference#VehicleDescriptorを参照
    var feed = GtfsRealtimeBindings.FeedMessage.decode(body);
    feed.entity.forEach(function(entity) {
      if (entity.vehicle) {
        //コンソールにデータを表示
        console.log(entity.vehicle.vehicle.id);
        console.log(entity.vehicle.position);
      }
    });
  }
});
```
コンソールで、
`$　browserify www/js/sample.js -o www/js/app.js`

何か足りないと言われれば、`npm　install ...` でなんとかなる？（力技で理解してないです）

あとは、HTMLファイルで「app.js」を読み込めば、MONACA　LoclKitのコンソールに緯度経度の情報が表示される。

#GoogleMapsJavaScriptAPIで地図上に表示する
HTMLファイルに追記

```HTML:mapping.html
<head>
...
  <script src="https://maps.googleapis.com/maps/api/js?key=[YOUER-API-KEY]" type="text/javascript" charset="UTF-8"></script>
...
</head>
<body>
  <!-- 地図の描画領域 -->
  <div id="map_canvas"></div>

  <!-- rialtimeGTFSデータを読むJavaScriptファイル -->
  <script src="js/app.js"></script>
</body>
```

JavaScriptファイルに追記

```JS:sample.js
var GtfsRealtimeBindings = require('gtfs-realtime-bindings');
var request = require('request');
var feed;
var latlng;
var i = 0;
var marker;
var markers = [];

//map描画
var mapOptions = {
  center: new google.maps.LatLng(34.666608, 133.918170), //地図上で表示させる緯度経度
  zoom: 14, //地図の倍率
  mapTypeId: google.maps.MapTypeId.ROADMAP //地図の種類
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
  mapOptions);

var view = function() {
  // 前のマーカーを削除
  if (markers == void(0)) {} else {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    markers = []; //参照を開放
  }

  //realGTFS取得
  var requestSettings = {
    method: 'GET',
    url: 'http://www3.unobus.co.jp/GTFS/GTFS_RT-VP.bin', //宇野バス
 
    encoding: null
  };
  request(requestSettings, function(error, response, body) {

    if (!error && response.statusCode == 200) {
      feed = GtfsRealtimeBindings.FeedMessage.decode(body);
      feed.entity.forEach(function(entity) {
        if (entity.vehicle) {
          console.log(entity.vehicle.vehicle.id);
          console.log(entity.vehicle.vehicle.license_plate);
          console.log(entity.vehicle.position);
          latlng = {
            lat: entity.vehicle.position.latitude,
            lng: entity.vehicle.position.longitude
          };

          marker = new google.maps.Marker({
            position: latlng,
            title: "車両No" + entity.vehicle.vehicle.license_plate
          });
          markers.push(marker);
        }
      });
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
      }
    }
  });
};
view();
setInterval(view, 15000);
```

#言い訳
とりあえず、簡単にまとめたため、わかりづらいところがあるかもしれません。
手当たり次第試したので、足りないことや飛んでること、いらないものがあるかもしれません。

言っていただければ、修正していきます。