Newer
Older
2025-shino / index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>待ち合わせMAP</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>
    body {
      font-family: "メイリオ", sans-serif;
      margin: 0;
      padding: 0;
      background: #f0f8ff;
    }
    header {
      background: #0066cc;
      color: white;
      padding: 1em;
      text-align: center;
    }
    main {
      padding: 1em;
    }
    #map {
      width: 100%;
      height: 80vh;
      margin-top: 1em;
      border: 2px solid #0066cc;
    }
    button {
      padding: 0.8em 1.2em;
      background: #0099ff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #0077cc;
    }
    a.station-link {
      color: #0066cc;
      text-decoration: none;
      font-weight: bold;
    }
    a.station-link:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

<header>
  <h1>待ち合わせMAP</h1>
</header>

<main>
  <p>近くの駅を表示(<a class="station-link" href="https://www.jr-example.co.jp/stationmap" target="_blank" rel="noopener">JR構内図リンク付き</a>)</p>
  <button onclick="sendLocation()">現在地を送信して表示</button>

  <div id="map"></div>
</main>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="map.js"></script>

</body>
</html>