駅すぱあと路線図で出口情報をリッチにポップアップしてみる

:
<script src="https://rmap.ekispert.jp/production/rosen.js"></script>

<!-- jqueryの追加 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
:

:
<style>

  html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
  #map { width: 100%; height: 100%; }

  /* 出口のスタイルの追加 */
  .exit_frame { background-color: #FFD700; padding: 10px; border: 5px solid black; width: 250px; height: 200px; overflow-y: scroll; }
  .exit_name { font-size: large; font-weight: 900; }
  .exit_comment { font-size: small; font-weight: 900; }

</style>
:

:
<script type="text/javascript">
  :

  // 要素が1つでも配列に変換する関数
  function toArray(obj) {
    if (!Array.isArray(obj)) {
      return [obj];
    }
    else {
      return obj;
    }
  }

  :
</script>
:

:
<script type="text/javascript">
    :

    // 駅がクリックされたら出口情報を表示する
    rosen.on("selectStation", function(data) {
      // 既存のマーカー、ポップアップをクリアする
      rosen.clearAll()

      if (data.stations) {
        // クリックした位置から最も近い駅の駅コードの取得
        var st_code = data.stations[0].code

        // 出口情報の取得
        var params = {
          "key"         : "駅すぱあとWebサービスのアクセスキー",
          "code"      :  st_code,
          "type"       : "exit"
        }

        $.get("https://api.ekispert.jp/v1/json/station/info", params, function(data) {
          console.log(data);
        }, "json").done(function(data) {
          var html = '<div class="exit_frame">';

          if(data.ResultSet.Information.Exit) {
            var exit_list = toArray(data.ResultSet.Information.Exit);

            exit_list.forEach(function(exit) {
              html += '<p class="exit_name">' + exit.Name + '</p>';
              // 改行コードを改行要素(br)に変換
              html += '<p  class="exit_comment">' + exit.Comment.replace(/\r?\n/g, '<br>') + '</p>';
              html += "<br>";
            });
          } else {
            // 出口情報がない場合
            html += "※出口情報がありません";
          }
          html += '</div>'

          // ポップアップクラスを生成
          var html_popup = Rosen.htmlPopup();
          html_popup.setContent(html);
          // 路線図にポップアップをセット
          rosen.setStationPopup(st_code, html_popup);
        });
      }
    });
  }

  :
</script>
:

// 既存のマーカー、ポップアップをクリアする
rosen.clearAll()

// 出口情報の取得
var params = {
   "key"       : "駅すぱあとWebサービスのアクセスキー",
   "code"      :  st_code,
   "type"      : "exit"
}

$.get("https://api.ekispert.jp/v1/json/station/info", params, function(data) ...

// ポップアップクラスを生成
var html_popup = Rosen.htmlPopup();
html_popup.setContent(html);
// 路線図にポップアップをセット
rosen.setStationPopup(st_code, html_popup);