<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script>
//ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

/***** ユーザーの現在の位置情報を取得 *****/
function successCallback(position) {
  var gl_text = "緯度:" + position.coords.latitude + "<br>";
    gl_text += "経度:" + position.coords.longitude + "<br>";
    gl_text += "高度:" + position.coords.altitude + "<br>";
    gl_text += "緯度・経度の誤差:" + position.coords.accuracy + "<br>";
    gl_text += "高度の誤差:" + position.coords.altitudeAccuracy + "<br>";
    gl_text += "方角:" + position.coords.heading + "<br>";
    gl_text += "速度:" + position.coords.speed + "<br>";
  document.getElementById("show_result").innerHTML = gl_text;
}

/***** 位置情報が取得できない場合 *****/
function errorCallback(error) {
  var err_msg = "";
  switch(error.code)
  {
    case 1:
      err_msg = "位置情報の利用が許可されていません";
      break;
    case 2:
      err_msg = "デバイスの位置が判定できません";
      break;
    case 3:
      err_msg = "タイムアウトしました";
      break;
  }
  document.getElementById("show_result").innerHTML = err_msg;
  //デバッグ用→ document.getElementById("show_result").innerHTML = error.message;
}
</script>
<title>Geolocation API サンプル</title>
</head>
<body>
<p>あなたの現在位置</p>
<div id="show_result"></div>
</body> 
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.