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" style="width: 100%; height: 300px;"></div>

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

<div class="js-open-street-map"
  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-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>