OpenStreetMap

OpenStreetMapがVer.2.9から利用可能になりました。

js-open-street-map という class 属性を適用すれば、簡単に好きなページで利用できます。

さらに、data 属性を指定することで経度、緯度、zoom値などを指定できます。

<div class="js-open-street-map" data-lat="35.18531791793727" data-lng="136.89938921481374" data-zoom="14" data-lazy="true" style="width: 100%; height: 300px;"></div>

また、data-multipleという属性にtrueを設定し、data-markers属性に対してピンを立てたい位置情報を|区切りで記述します。そうすることで下のように複数ピンを表示することが可能になります。

<div class="js-open-street-map"
  data-lazy="true"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  style="width: 100%; height: 400px;"
></div>

さらに、data-messagesという属性を使えばpin一つ一つにコメントをつけることも可能です。メッセージを区切りたい場合は、[[:split:]]このような記号を使って分割します。

<div class="js-open-street-map"
  data-lazy="true"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  data-messages='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  style="width: 100%; height: 400px;"
></div>

OpenStreetMap の地図が画面の下部に存在する場合、組み込みJSの実行を、表示領域（viewport）に入るまで遅延させることで、パフォーマンスを向上させることが可能です。

data-lazy 属性の値に true を指定することで、組み込みJSの実行を遅延させることができます。

<div 
  class="js-open-street-map"
  data-lat="35.18531791793727"
  data-lng="136.89938921481374"
  data-zoom="14"
  data-lazy="true"
  style="width: 100%; height: 300px;"
></div>