var rosen;

function init() {
  rosen = new Rosen("map", {
    apiKey: "2jr5nchcswemrfjj67jvjaqu",  // アクセスキーはサンプル用です。実際にご利用されるときは書き換えてください。
  });

  // マーカーの見た目を定義
  var my_icon = L.divIcon({
    html: '<div>カスタムマーカー</div>',
    className: 'station-marker',  // CSSのクラス名。指定しないとデフォルトのleaflet-div-iconというクラスがつき、background: #fff;border: 1px solid #666;というスタイルがつきます
    iconSize: [200, 30] // iconSizeを指定しないと、マーカーの中心でなく、左上が指定した座標に来るようになります
  });

  // 神田にカスタムマーカーをセット
  rosen.setStationMarker(22617, {icon: my_icon});

  // 新橋にカスタムマーカーをセット
  rosen.setStationMarker(22751, {icon: my_icon}).then(function(marker) {
    // マーカーにポップアップをバインドする
    var html_popup = Rosen.htmlPopup();
    html_popup.setContent('<img src="http://www.val.co.jp/images/footer/mainimg_matinamikun.png" width="300" height="137"><br>「まちなみくん」は、私達が住んでいる街並みの“影”から誕生した<a href="http://www.val.co.jp/" target="_blank">ヴァル研究所</a>のオリジナルキャラクターです。');
    marker.bindPopup(html_popup);
    marker.openPopup();
  });
}

window.addEventListener('load', init);

div.station-marker { background: orange; text-align: center; color: white; font-size: 20px; border-radius: 5px; box-shadow: 10px 10px 10px rgba(0,0,0,0.4);}