OpenStreetMap
OpenStreetMapがVer.2.9から利用可能になりました。js-open-street-mapというclass属性を適用すれば、簡単に好きなページで利用できます。
さらに、data属性を指定することで経度、緯度、zoom値を指定できます。
属性 | 入力する値 |
---|---|
data-lat属性 | 緯度 |
data-lng属性 | 経度 |
data-zoom属性 | 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>