「日経ソフトウェア11月号」のGoogleマップにリアルタイム表示 をやってみた その3

アプリケーションの実行

アプリケーションを実行します。

交通オープンデータセンターで入手したアクセストークンをserver-config.jsonファイルに貼り付けます。貼り付ける場所は★マークの部分です。

{
  "PORT": 8080,
  "PUBLIC_TRANSPORTATION_OPEN_DATA_API_CONSUMER_KEY": "★★★★",
  "PUBLIC_TRANSPORTATION_OPEN_DATA_API_ENDPOINT": "https://api.odpt.org/api/v4"
}

 

次に、index.htmlをテキストエディタで開き14行目の★部分にAPIキーを貼り付けます。

 

14:  <script src="https://maps.google.com/maps/api/js?key=★★★★"

 

次にWindowsPowerShellを開き、projectフォルダに移動し以下を入力します。

 

node server.js

 

上記入力後、Server started on port:8080が表示されたら、ブラウザを開き、localhost:8080を入力します。

 

PS G:\project> node server.js
Fetching data...
Fetched data.
Server started on port:8080

 

バス停検索に渋谷と入力しリターンを押すと右側の選択されたバス停にバス停の候補がひょうじされます。ここでは渋谷三丁目をせんたくしています。

Webブラウザ

 

選択するとバス停の位置がMap上に表示されます。

「都01(T01)・・・」の左のチェックボックスをオンにすると、バス路線と各バス停名も表示されます。さらに左の交通状況表示を選択すると、バスの位置情報が表示されます。

バス停とバス路線

 

/* -----codeの行番号----- */