<html>
<head>
<title>待ち合わせMAP</title>
<meta charset="UTF-8">
<title>位置情報付きマップ</title>
<style>
body { font-family: sans-serif; text-align: center; }
#map { width: 90%; height: 500px; margin: 20px auto; border: 2px solid #aaa; }
button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
</style>
</head>
<body>
<h1>近くの駅を地図に表示</h1>
<button onclick="initMap()">現在地を取得して表示</button>
<div id="map"></div>
<script>
let map;
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 = { lat, lng };
map = new google.maps.Map(document.getElementById("map"), {
center: currentPos,
zoom: 15,
});
// 現在地にマーカー
new google.maps.Marker({
position: currentPos,
map: map,
label: "📍",
title: "あなたの現在地",
});
// 駅を検索
const request = {
location: currentPos,
radius: 2000, // 半径2km以内
type: ["train_station"],
};
const service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, (results, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (let i = 0; i < results.length; i++) {
const place = results[i];
new google.maps.Marker({
map,
position: place.geometry.location,
title: place.name,
});
}
} else {
alert("近くの駅情報を取得できませんでした。");
}
});
}
function error(err) {
alert("位置情報を取得できませんでした: " + err.message);
}
</script>
<!-- 🔑 ここにあなたのGoogle Maps APIキーを入れてください -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
</script>
</body>
</html>
