<script>
// 地図中心点の緯度経度とズーム値
var map = L.map('map').setView([35.68747,139.769332], 12);
// 読み込む地図（ここでは、Open Street Map）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// アイコンサイズの設定など
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'icon/Shadow.png', // シャドウ付きアイコンを使う場合は、削除もしくはコメントアウト
shadowSize: [41, 41], // シャドウ付きアイコンを使う場合は、削除もしくはコメントアウト
shadowAnchor: [10, 41], // シャドウ付きアイコンを使う場合は、削除もしくはコメントアウト
iconSize: [25, 41], // シャドウ付きアイコンを使う場合は、[41, 41]に設定
iconAnchor: [10, 41],
popupAnchor: [3, -40]
}
});
// 利用するアイコンの種類とURL
var GreenIcon = new LeafIcon({iconUrl: 'icon/Green.png'}),
RedIcon = new LeafIcon({iconUrl: 'icon/Red.png'}),
OrangeIcon = new LeafIcon({iconUrl: 'icon/Orange.png'}),
PurpleIcon = new LeafIcon({iconUrl: 'icon/Purple.png'});
// 各アイコンを表示させる座標。アイコンの種類。ポップアップの記述など。「title」は、アイコンにオンマウスで表示される内容。
L.marker([35.681091,139.767197], {icon: GreenIcon,title: '東京駅'}).bindPopup("東京駅<br>Green Iconです").addTo(map);
L.marker([35.658603,139.745428], {icon: RedIcon,title: '東京タワー'}).bindPopup("東京タワー<br>Red Iconです").addTo(map);
L.marker([35.710001,139.809951], {icon: OrangeIcon,title: '東京スカイツリー'}).bindPopup("東京スカイツリー<br>Orange Iconです").addTo(map);
L.marker([35.689483,139.691736], {icon: PurpleIcon,title: '東京都庁'}).bindPopup("東京都庁<br>Purple Iconです").addTo(map);
</script>
