<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>グループ待ち合わせマップ</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
body {
font-family: sans-serif;
text-align: center;
background: #f8f8f8;
margin: 0;
padding: 0;
}
h1 {
background: #0066cc;
color: white;
padding: 15px;
margin: 0;
}
#map {
width: 90%;
height: 500px;
margin: 20px auto;
border: 2px solid #aaa;
border-radius: 10px;
}
input, button {
font-size: 16px;
padding: 8px;
margin: 5px;
}
#groupForm {
margin-top: 20px;
}
.my-pin {
color: blue;
}
</style>
</head>
<body>
<h1>グループ待ち合わせマップ</h1>
<div id="groupForm">
<p>グループ名を入力してください：</p>
<input type="text" id="groupName" placeholder="例：友達Aグループ">
<button onclick="joinGroup()">参加する</button>
</div>
<div id="map" style="display:none;"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
let group = "";
let map;
let myMarker;
let lat, lng;
// グループに参加ボタンを押したとき
function joinGroup() {
group = document.getElementById("groupName").value.trim();
if (!group) {
alert("グループ名を入力してください。");
return;
}
document.getElementById("groupForm").style.display = "none";
document.getElementById("map").style.display = "block";
initMap();
}
// 地図の初期化
function initMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert("このブラウザでは位置情報が使えません。");
}
}
// 位置情報取得成功時
function success(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
// 自分の位置をサーバーに送信
fetch("http://roy.e.koeki-u.ac.jp/~c123139/mycgi/save_location.rb", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ lat: lat, lng: lng, group: group })
});
// 地図を作成
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);
// 自分のマーカー
myMarker = L.marker([lat, lng]).addTo(map)
.bindPopup(`📍あなた（${group}）`).openPopup();
// 定期的に他の人を表示
loadOthers();
setInterval(() => {
updateMyPosition();
loadOthers();
}, 10000); // 10秒ごと更新
}
// 自分の現在位置を更新
function updateMyPosition() {
navigator.geolocation.getCurrentPosition(pos => {
lat = pos.coords.latitude;
lng = pos.coords.longitude;
if (myMarker) {
myMarker.setLatLng([lat, lng]);
}
fetch("http://roy.e.koeki-u.ac.jp/~c123139/mycgi/save_location.rb", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ lat: lat, lng: lng, group: group })
});
});
}
// 他の人の位置を読み込んで表示
function loadOthers() {
fetch("http://roy.e.koeki-u.ac.jp/~c123139/mycgi/get_location.rb")
.then(res => res.json())
.then(data => {
// 既存の他人のマーカーを削除
map.eachLayer(layer => {
if (layer instanceof L.Marker && layer !== myMarker) {
map.removeLayer(layer);
}
});
// 同じグループの他の人を表示
data.filter(u => u.group === group).forEach(user => {
// 自分は除外
if (Math.abs(user.lat - lat) < 0.0001 && Math.abs(user.lng - lng) < 0.0001) return;
L.marker([user.lat, user.lng]).addTo(map)
.bindPopup(`👥 同じグループ：${group}`);
});
})
.catch(err => {
console.error("データ取得エラー:", err);
});
}
// 位置情報取得失敗時
function error(err) {
alert("位置情報を取得できませんでした：" + err.message);
}
</script>
</body>
</html>
