document.addEventListener("DOMContentLoaded", () => {
    // 例: コントロールレイヤ
    var pl = [			// Polyline: 連続線分
    [38.895127,139.819371],
    [38.904827,139.829049],
    [38.918192,139.835449],
    [38.919207,139.835342]
    ];

    var plProp = {	
        stroke:true,		// polylineに与えるオプション
        color: "#D92B04",		// 線分の色
        opacity: 0.7,		// 線分の透明度
        weight: 9			// 線分の太さ
    };
    var marker1 = pl[0]
    var marker2 = pl[1]
    var marker3 = pl[2]
    var marker4 = pl[3]
    var otherPoint = [38.890, 139.822];
    var osmTile =	// OSMのタイル
	L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution:
	    '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
contributors'
	});
    var gsiTile =	// 国土地理院タイル
	L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	    attribution:
	    '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
	});
    // var plobj = L.polyline(pl, plProp).addTo(m1map);
    var markerLayer1 = L.marker(marker1)
    var markerLayer2 = L.marker(marker3);
    var markerLayer3 = L.marker(marker4);
    var mlmap = L.map("markerlayer", {
	layers: [gsiTile, markerLayer1, markerLayer2, markerLayer3],
	center: marker1, zoom: 13, scrollWheelZoom: false
    });
    
    /*     上記4行は以下のようにするのと同じ効果
	   var mlmap = L.map("markerlayer").setView(mlCenter, 16);
	   gsiTile.addTo(mlmap);
	   markerLayer1.addTo(mlmap);
	   markerLayer2.addTo(mlmap); */
    // 以下、コントロールレイヤの設定
    //   ベースレイヤはOSMと国土地理院2つをJSON形式で指定
    markerLayer1.bindPopup("公益大学カフェテリア側駐車場").openPopup();
    markerLayer2.bindPopup("カルビーハウス 〒998-0044 山形県酒田市中町２丁目２−２１").openPopup();
    markerLayer3.bindPopup("駐車場").openPopup();
    var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
    //   マーカーを2つオーバーレイレイヤに指定
    var ovlLayers  = {'マーク1': markerLayer1, 'マーク2': markerLayer2};
    //   ベースレイヤとオーバーレイレイヤをマップに追加
    L.control.layers(baseLayers, ovlLayers).addTo(mlmap);
}, false);	// HTML文書がロードされたら上のアロー関数を呼ばせる