<html>
<head>
<title>待ち合わせMAP</title>
<html lang="ja">
<meta charset="UTF-8">
<style>
body { font-family: sans-serif; text-align: center; background: #f8f8f8; }
#map { width: 90%; height: 500px; margin: 20px auto; border: 2px solid #aaa; }
button { padding: 10px 20px; font-size: 16px; margin-top: 10px; cursor: pointer; }
#nearest { font-size: 18px; margin-top: 20px; }
#mapLink { margin-top: 10px; font-size: 16px; }
.map-btn {
display: inline-block;
margin-top: 8px;
padding: 10px 16px;
background: #0066cc;
color: white;
text-decoration: none;
border-radius: 6px;
}
.map-btn:hover { background: #004d99; }
</style>
</head>
<body>
<h1>近くの駅を表示（JR構内図リンク付き）</h1>
<button onclick="initMap()">現在地を取得して表示</button>
<div id="map"></div>
<div id="nearest"></div>
<div id="mapLink"></div>
<script>
let map;
// JR駅の構内図URLリスト
const stationMaps = {
"酒田駅": "https://www.jreast.co.jp/estation/stations/728.html",
"山形駅": "https://www.jreast.co.jp/estation/stations/157.html",
"新庄駅": "https://www.jreast.co.jp/estation/stations/903.html",
"北山形駅": "https://www.jreast.co.jp/estation/stations/593.html"
};
// 地図初期化
function initMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert("このブラウザでは位置情報が使えません。");
}
}
function success(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
const currentPos = [lng, lat]; // leafletは [経度, 緯度]
// 地図を生成
map = L.map('map').setView([lat, lng], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 現在地マーカー
L.marker([lat, lng]).addTo(map)
.bindPopup("📍あなたの現在地").openPopup();
// Overpass APIで近くの駅を検索
const query = `
[out:json];
node(around:5000,${lat},${lng})["railway"="station"];
out;
`;
fetch("https://overpass-api.de/api/interpreter", {
method: "POST",
body: query
})
.then(res => res.json())
.then(data => {
if (!data.elements.length) {
document.getElementById("nearest").textContent = "近くに駅が見つかりませんでした。";
return;
}
// 駅をマップにマーカー表示
let nearest = null;
let minDist = Infinity;
data.elements.forEach(station => {
const sLat = station.lat;
const sLng = station.lon;
const dist = Math.sqrt((lat - sLat)**2 + (lng - sLng)**2);
L.marker([sLat, sLng]).addTo(map)
.bindPopup(`🚉 ${station.tags.name || "駅名不明"}`);
if (dist < minDist) {
minDist = dist;
nearest = station;
}
});
// 一番近い駅を表示
if (nearest) {
const nearestName = nearest.tags.name || "駅名不明";
let officialUrl = null;
// ★部分一致でも構内図リンクを探す
for (const [key, value] of Object.entries(stationMaps)) {
if (nearestName.includes(key.replace("駅", ""))) {
officialUrl = value;
break;
}
}
document.getElementById("nearest").textContent =
`現在地から近い駅は「${nearestName}駅」です！`;
if (officialUrl) {
document.getElementById("mapLink").innerHTML = `
<a class="map-btn" href="${officialUrl}" target="_blank">
🚉 ${nearestName}の構内マップを見る（JR東日本公式）
</a>
`;
} else {
document.getElementById("mapLink").innerHTML = `
<p>この駅の構内マップはまだ登録されていません。</p>
`;
}
}
})
.catch(() => {
alert("駅情報を取得できませんでした。");
});
}
function error(err) {
alert("位置情報を取得できませんでした: " + err.message);
}
</script>
<!-- Leaflet.js 読み込み -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</body>
</html>
