LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-12-09

前書き

前回の「リアルタイム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)
        }//マーカーのアイコンを指定
      });
 }
});

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1