<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<div id="map" style="width: ***px; height: ***px;"></div>
<script type="text/javascript">
window.onload() = function() {
// 位置情報と表示データの組み合わせ
var data = new Array();
data.push({position: [35.697745, 139.826395], content: '亀戸'});
data.push({position: [35.700295, 139.833692], content: '亀戸水神'});
data.push({position: [35.707055, 139.831897], content: '東あずま'});
data.push({position: [35.710127, 139.828033], content: '小村井'});
data.push({position: [35.717753, 139.816786], content: '曳舟'});
var myMap = L.Map("map" {
// ズームレベル
zoom: 13, //
// 中心点緯度経度
center: [35.701306, 139.700044],
// 地図上をクリックされたときにPopupを閉じない設定
closePopupOnClick: false
});
// タイルレイヤにはオープンストリートマップを拝借
var osm = L.tileLayer("https://tile.openstreetmap.jp/{z}/{x}/{y}.png", {
attribution: "<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
});
osm.addTo(myMap);
for (i = 0; i < data.length; i++) {
var myPopup = L.popup({
// 他のPopupが開いたときに閉じない設定
autoClose: false
});
myPopup.setContent(data[i].content);
var myMarker = L.marker(data[i].position);
myMarker.bindPopup(myPopup);
myMarker.addTo(myMap);
}
}
</script>