/* ボタンと出力エリアの基本スタイル */
button {
  margin: 10px;
  padding: 10px;
  font-size: 16px;
}

div {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

// サンプル1: 現在の位置情報を取得する
document.getElementById('get-location').addEventListener('click', function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function(position) {
        document.getElementById('location-output').innerHTML =
          '緯度: ' + position.coords.latitude + '<br>経度: ' + position.coords.longitude;
      },
      function(error) {
        document.getElementById('location-output').innerHTML =
          'エラー: ' + error.message;
      },
      {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      }
    );
  } else {
    document.getElementById('location-output').innerHTML = 'Geolocationはこのブラウザでサポートされていません。';
  }
});

// サンプル2: 位置情報の監視
let watchId;

document.getElementById('start-watch').addEventListener('click', function() {
  if (navigator.geolocation) {
    watchId = navigator.geolocation.watchPosition(
      function(position) {
        document.getElementById('watch-output').innerHTML =
          '新しい位置: ' + position.coords.latitude + ', ' + position.coords.longitude;
      },
      function(error) {
        document.getElementById('watch-output').innerHTML =
          'エラー: ' + error.message;
      },
      {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      }
    );
  } else {
    document.getElementById('watch-output').innerHTML = 'Geolocationはこのブラウザでサポートされていません。';
  }
});

document.getElementById('stop-watch').addEventListener('click', function() {
  if (watchId) {
    navigator.geolocation.clearWatch(watchId);
    document.getElementById('watch-output').innerHTML = '位置情報の監視を停止しました。';
  }
});