<html>
<head>
<title>待ち合わせMAP</title>
<meta charset="UTF-8">
<title>位置情報付きマップ!</title>
<style>
body { font-family: sans-serif; text-align: center; }
#map { width: 80%; height: 400px; margin: 20px auto; border: 2px solid #aaa; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>現在地を地図に表示する!</h1>
<p>ボタンを押すと現在地を取得して地図に表示します。</p>
<button onclick="getLocation()">現在地を表示</button>
<div id="map"></div>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap, showError);
} else {
alert("このブラウザでは位置情報が使えません。");
}
}
function showMap(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
const mapFrame = `<iframe width="100%" height="400" style="border:0"
src="https://www.google.com/maps?q=${lat},${lon}&z=15&output=embed"></iframe>`;
document.getElementById("map").innerHTML = mapFrame;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("位置情報の取得が許可されませんでした。");
break;
case error.POSITION_UNAVAILABLE:
alert("位置情報を取得できませんでした。");
break;
case error.TIMEOUT:
alert("位置情報の取得がタイムアウトしました。");
break;
default:
alert("不明なエラーが発生しました。");
}
}
</script>
</body>
</html>
