Web版スマホ簡易ナビ（5/5）

<div style="text-align:center;">
  目的地：<input type="text" id="addressInput" value="大坂城" style="width: 150px">
  <input type="button" value="ナビ開始" onclick="naviStart()">
</div>
<div id="distanceInfo"
style="width:100%; height:60px; font-size:60px; text-align:center;"></div>
<div id="headingInfo"
style="width:100%; height:50px; font-size:30px; text-align:center; padding-top:20px;"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=xxxxxxxxxx"></script>
<!--「key=xxxxxxxxxx」にはGoogleで取得したAPIキーを記述します -->

<script type="text/javascript">
var latLng = new Array();  //緯度・経度情報
var watchId;  //監視ID

//簡易ナビ開始
function naviStart(){
  //初期化
  latLng = new Array(2);
  document.getElementById("distanceInfo").innerHTML = "";
  document.getElementById("headingInfo").innerHTML = "";
  
  //現在位置取得停止
  stopWatchPosition(watchId);
  
  //緯度・経度取得
  getIdoKeido();
}
//緯度・経度取得
function getIdoKeido() {
  var addressInput = document.getElementById('addressInput').value;
  var geocoder = new google.maps.Geocoder();
  
  //★目的地の位置情報を取得
  geocoder.geocode(
    {
      address: addressInput
    },
    function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      //緯度・経度取得成功
        //目的地をlatLngオブジェクト（緯度・経度情報）を保存
        latLng[1] = results[0].geometry.location;
        //現在位置取得開始
        startWatchPosition();
      }
      else {
      //緯度・経度取得失敗
        alert(addressInput + "：住所が見つかりませんでした。");
      }
    });
}
//現在位置取得開始
function startWatchPosition(){
  if (navigator.geolocation) {
     //★現在の位置情報を定期的に取得
     watchId = navigator.geolocation.watchPosition(successCallback, errorCallback,
                 { maximumAge: 3000, timeout: 30000, enableHighAccuracy: true });
  } else {
    alert("ブラウザがGeolocationに対応していません。");
  }
}
//現在位置取得に成功した時の処理
function successCallback(position) {
  //現在位置をLatLngオブジェクトに変換
  latLng[2] = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  
  if (latLng[1] != undefined && latLng[2] != undefined) {
    //★２点間の距離を取得
    var distance = google.maps.geometry.spherical.computeDistanceBetween(latLng[2], latLng[1]) / 1000;
    document.getElementById("distanceInfo").innerHTML = distance.toFixed(3) + "km";
    
    //★２点間の方角を取得
    var heading = google.maps.geometry.spherical.computeHeading(latLng[2], latLng[1]);
    
    //北から東向きの方角は真北を0として時計回り180度まで。
    //北から西向きの方角は真北を0として反時計回りマイナス180度まで。
    
    if (heading < 0) {
      //わかりやすいようにマイナス値の場合は360度プラス
      heading = heading + 360;
    }
    
    //方角記号（8方向）を判定
    var NESW = "";
    if (heading >= 337.5 || heading < 22.5) {
      NESW = "N";   //北
    } else if (heading >= 22.5 && heading < 67.5) {
      NESW = "NE";  //北東
    } else if (heading >= 67.5 && heading < 112.5) {
      NESW = "E";   //東
    } else if (heading >= 112.5 && heading < 157.5) {
      NESW = "SE";  //南東
    } else if (heading >= 157.5 && heading < 202.5) {
      NESW = "S";   //南
    } else if (heading >= 202.5 && heading < 247.5) {
      NESW = "SW";  //南西
    } else if (heading >= 247.5 && heading < 292.5) {
      NESW = "W";   //西
    } else if (heading >= 292.5 && heading < 337.5) {
      NESW = "NW";  //北西
    }
    
    document.getElementById('headingInfo').innerHTML = NESW + " " + parseInt(heading) + "°";
  }
}
//現在位置取得に失敗の時の処理
function errorCallback(error) {
  alert("Geolocationが利用できません");
}
//現在位置取得停止
function stopWatchPosition(){
  navigator.geolocation.clearWatch(watchId);
}
</script>