<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>現在地マップ</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
body {
font-family: "Inter", sans-serif;
margin: 0;
background: #f5f7fa;
color: #333;
}
.container {
max-width: 700px;
margin: 30px auto;
padding: 20px;
}
.card {
background: white;
padding: 20px;
border-radius: 16px;
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.card h2 {
margin-top: 0;
font-size: 20px;
font-weight: 600;
}
#map {
height: 60vh; /* 地図の高さ */
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.btn {
display: inline-block;
padding: 10px 18px;
background: #4a90e2;
color: white;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
}
.btn:hover {
background: #357ab8;
}
</style>
</head>
<body>
<div class="container">
<!-- 情報カード -->
<div class="card">
<h2>現在地を表示しています</h2>
<p>位置情報の取得を許可してください。</p>
<a href="index.html" class="btn">グループ選択に戻る</a>
</div>
<!-- 地図本体 -->
<div id="map"></div>
</div>
<script>
// グループ名取得
const group = new URLSearchParams(location.search).get("group");
// マップ初期化（皇居付近）
const map = L.map('map').setView([35.681236, 139.767125], 15);
// タイル
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 現在地を取得して自動移動
function moveToCurrentLocation() {
if (!navigator.geolocation) {
alert("このブラウザでは位置情報が使えません");
return;
}
navigator.geolocation.getCurrentPosition(
function (pos) {
const lat = pos.coords.latitude;
const lng = pos.coords.longitude;
// 自動移動
map.flyTo([lat, lng], 17, { duration: 2 });
// 現在地マーカー
L.marker([lat, lng]).addTo(map)
.bindPopup("あなたの現在地")
.openPopup();
// ここでサーバー送信なども可能
/*
fetch("../mycgi/map1/save_location.rb", {
method: "POST",
body: new URLSearchParams({ group, lat, lng })
});
*/
},
function (error) {
alert("位置情報が取得できませんでした");
}
);
}
moveToCurrentLocation();
</script>
</body>
</html>
