GTFSのデータをGoogle Mapに表示する

前書き

前回の「リアルタイムGTFS」をGoogleマップに表示するの続きです。
前回はこちら→

あと、Monacaのアドベントカレンダーにも載せさせていただいています。

間違っている記述や改善案など、いただけたら幸いです。
（間違っていることを生徒に教える可能性があるため、常に不安です）

環境など

前回のものをベースにすることを前提にしています。
が、無くても今回のものは表示できると思います。（CSVファイルを読み込むだけなので）

準備

本来は、プログラムを使って自動的に
　①GTFSのZIPファイルをダウンロードして
　②展開し
　③中に入っているCSVを読み込む　を行うことが望ましいと思いますが、

今回は①と②の作業を手作業で行います。

今回も、宇野バスさんのデータを利用していきます。

1. データのダウンロード
   宇野バスさんのデータよりzipファイルをダウンロード
2. 展開したデータをフォルダに移動

www ―┬―
　　　 ├―
　　　 ├― data ―┬― agency_jp.txt
　　　　　　　　　├― agency.txt
　　　　　　　　　└― ...

今回やること

マッピングするのはバス停の位置を表示します。
CSVファイル（Jsonも）の読み込みとGoogle Map上にマッピングします。
（内容が薄いですが、授業の中では使うことが多いので）
経路検索は、続きに書きます。（Google Directions APIを使う予定）
→書きました（この薄い内容じゃ申し訳なさすぎて急遽書きました。途中ですが…）

最初から経路検索でMonacaのアドベントカレンダーに書けばよかった…

1.GTFSを読み込む

CSVファイルとして読み込むVer.

sample.js

var csvList = [];
const $ = require('jquery');

$.ajax({
  /* 取得するファイルを指定 */
  url: './data/unoBus/stops.txt',
  /* データの取得に成功した場合以下の処理 */
  success: function(data) {
    var tempList = data.split('\n');
    for (var i = 0; i < tempList.length; i++) {
      csvList[i] = tempList[i].split(",");
      console.log(csvList[i][2]);
    }
  }
});

Json形式で読み込むVer.

現在作成中

2.読み込んだGTFSデータをマッピング

var csvList = [];
const $ = require('jquery');

の後ろに追記

sample.js

var marker=[];

CSVを読み込んだFor文の後ろに追加

for (var i = 0; i < tempList.length; i++) {
      csvList[i] = tempList[i].split(",");
      console.log(csvList[i][2]);

sample.js

// マーカー毎の処理
      var markerLatLng = new google.maps.LatLng(csvList[i][4], csvList[i][5]); // 緯度経度のデータ作成
      marker[i] = new google.maps.Marker({ // マーカーの追加
        position: markerLatLng, // マーカーを立てる位置を指定
        map: map, // マーカーを立てる地図を指定
        title: csvList[i][2],
        icon: {
          url: 'img/icon_bus_stop.png',
          scaledSize: new google.maps.Size(40, 40)
        }//マーカーのアイコンを指定
      });

 }
});