ソースファイルを表示
sample/sample_marker.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>Leaflet マーカを表示</title>
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>
<style type="text/css">
#map_container {
position: absolute;
top:0; left:0; right:0; bottom:0;
cursor: default;
}
#btn_container {
position: absolute;
left:12px; bottom:12px;
z-index: 1000;
}
</style>
<script type="text/javascript" charset="UTF-8">
var placeList = [{ // マーカデータの定義
'name':'兼六園', 'addr':'石川県金沢市兼六町',
'coord':{'lat':36.562214, 'lng':136.662544},
'photo':'<img src="img/kenrokuen.jpg" width="180" height="120" />'
},{
'name':'後楽園', 'addr':'岡山県岡山市北区後楽園',
'coord':{'lat':34.667849, 'lng':133.934932},
'photo':'<img src="img/korakuen.jpg" width="180" height="120" />'
},{
'name':'偕楽園', 'addr':'茨城県水戸市常磐町1丁目',
'coord':{'lat':36.374166, 'lng':140.452557},
'photo':'<img src="img/kairakuen.jpg" width="180" height="120" />'
}];
var map; // leaflet地図
var bound; // 表示領域（全体表示で表示される範囲）
function init() {
map = L.map('map_container', { zoomControl: false });
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院標準地図</a>"
}).addTo(map); // 地理院地図を表示
L.control.scale({imperial:false, position:'bottomright'}).addTo(map); // 目盛表示
L.control.zoom({position:'bottomright'}).addTo(map); // ズーム制御
let grp = L.layerGroup(); // マーカ表示用レイヤグループ
map.addLayer(grp);
let latLng = L.latLng(placeList[0].coord.lat, placeList[0].coord.lng);
bound = L.latLngBounds(latLng, latLng);
for (let i = 0; i < placeList.length; i++) { // マーカを登録
let place = placeList[i];
latLng = L.latLng(place.coord.lat, place.coord.lng);
bound.extend(latLng);
let str = place.name + '<br>\n' + place.addr + '<br>\n';
if (typeof(place.photo) != 'undefined') str += place.photo;
let popup = L.popup().setContent(str);
L.marker(latLng, {title: place.name}).bindPopup(popup).addTo(grp);
}
map.fitBounds(bound); // マーカ全体の範囲を表示
}
</script>
</head>
<body onload="init()">
<div id="map_container"></div>
<div id="btn_container">
<input type="button" onclick="map.fitBounds(bound)" value="全体表示" />
</div>
</body>
</html>