Last Update: Sep.19,2019

JavaScript Sample

動作確認: ○IE11(Win7) ○Firefox69(Win7) ○Chrome77(Win7)

■ カスタムデータ属性(data-*)から地図を作る(Leaflet)

マーカーをひとつだけ表示するという条件で、div の属性に以下の指定を加えるだけで、地図を表示するスクリプトを書いてみました。

div の属性 指定する値
class lmaps と指定します(必須)
data-latlng 緯度と経度を javascript の配列として記述したもの(必須)
data-zoom ズームレベルを指定します(任意)。デフォルトは14。
data-title ツールチップを指定します(任意)。

たとえば、以下のように指定します。

<div class="lmaps" data-latlng="[35.700753,139.771819]" data-zoom="18"></div>

また、吹き出しに表示したいコンテンツがある場合は、マップを表示する div 内にそれぞれ記述して下さい。何もない場合には吹き出しは表示されません。

AKB48劇場
東京都千代田区外神田4-3-3
ドン・キホーテ秋葉原8F
TEL 03-5298-8648
SKE48劇場
愛知県名古屋市中区錦3-24-4
SUNSHINE SAKAE 2F
TEL 052-310-2207

NMB48 のマップがないとか文句を言わないで下さい(笑)。

■ ソース(use leafletlib.base.js, leafletlib.extend.js