<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

<!-- 以下LeafletのJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/leaflet.css' />
<script src='https://unpkg.com/[email protected]/dist/leaflet.js'></script>

<script>
function init_map() {

    var map = L.map('mapcontainer');
    map.setView([43.6599240747891, 142.14111328125003], 6); //初期の中心位置とズームレベルを設定

    //マップタイルを読み込み、引用元を記載する
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
        {attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}).addTo(map);
}
    //ダウンロード時に初期化する
    window.addEventListener('DOMContentLoaded', init_map());

</script>