2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 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)
        }//マーカーのアイコンを指定
      });
 }
});
2
1
0

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
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?