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

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データをマッピング

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) 
        }//マーカーのアイコンを指定 
      }); 

} 
});