<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=yes">
<title>Html5 Geo サンプル</title>
<script>
<!--
// 端末の現在の位置情報を取得 --------
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
function successCallback(position) {
var lati = position.coords.latitude;
var long = position.coords.longitude;
gl_text = "【現在地】<br>";
gl_text += "緯度：" + lati + "<br>";
gl_text += "経度：" + long + "<br>";
gl_text += "同精度：" + position.coords.accuracy + "m<br>";
gl_text += "高度：" + position.coords.altitude + "m<br>";
gl_text += Date(position.timestamp).toLocaleString() + "<br>";
gl_text += "<img src='http://maps.google.com/maps/api/staticmap?center="
gl_text += lati + "," + long + "&markers=size:mid|color:0xee3366|label:C|"
gl_text += lati + "," + long +"&zoom=15&size=240x320&sensor=true&format=jpg&key=【API key】'>";
document.getElementById("show_result").innerHTML = gl_text;
}; // successCallback(position) -------------------
// 位置情報が取得できない場合の処理 ------------
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;
}; // errorCallback(error) ----------------------
// -->
</script>
<style>
#show_result{ width:400px; margin:0 auto; }
</style>
</head>
<body>
<div id="show_result">ここに現在位置表示</div><br />
</body>
</html>
10. getCurrentPosition()で位置情報を呼び出します 11. getCurrentPosition 有効時の function 定義 12-18. successCallback() の詳細情報をセットします 19. 位置情報の取得時間です 20-22. Google Static Maps タグを記述します 23. Html タグとして、情報と地図を設定します 27. getCurrentPosition 無効時の function 定義 29-38. エラーコード毎の表示をセットします 40. エラーコード表示を Html タグに設定します 45. 結果出力エリアの書式を指定 49. 位置情報の出力エリアを指定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes">
<title>Html5 位置情報</title>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script>
function initMap() { // google maps Javascript と同期
if (navigator.geolocation) { // 現在の位置情報を取得する
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,option);
} else {
alert('navigator.geolocation は利用出来ません');
}
}; // initMap() --------------
// 現在の位置情報を取得時の処置 ------------------
function successCallback(position) {
var lati = position.coords.latitude.toFixed(5);
var long = position.coords.longitude.toFixed(5);
var g_txt = "緯度：" + lati + "<br>";
g_txt += "経度：" + long + "<br>";
g_txt += "同精度：" + position.coords.accuracy + " m<br>";
g_txt += "高度：" + position.coords.altitude + " m<br>";
document.getElementById("txt_result").innerHTML = g_txt; // 位置の書き出し
// Google Mapsに書き出し ------------------
var latlng = new google.maps.LatLng( lati,long ); // 地図の中心
var mapobj = new google.maps.Map( document.getElementById('gmap'), {
zoom: 15 ,
center:latlng
});
new google.maps.Marker( { map:mapobj , position:latlng } ); // マーカーセット
}; // successCallback(position) ---------------
// 位置情報が取得できない場合の処置 ---------------
function errorCallback(error) {
var err_msg = "";
switch(error.code){
case 0:
err_msg = "原因不明のエラーが発生しました";
break;
case 1:
err_msg = "位置情報の利用が許可されていません";
break;
case 2:
err_msg = "デバイスの位置が取得できません";
break;
case 3:
err_msg = "タイムアウトしました";
break;
}
document.getElementById("txt_result").innerHTML = err_msg;
}; // errorCallback(error) ----------------------
var option = { // 位置取得オプション
"enableHighAccuracy":true,
"timeout":8000,
"maximumAge":60000,
}
</script>
<style>
h4,#txt_result{ width:90%; margin:0 auto; }
#gmap{ width:90%; height:320px; margin:0 auto; }
</style>
</head>
<body>
<h4> 【現在位置】</h4>
<div id="txt_result">ここに位置情報</div><br>
<div id="gmap">ここに地図</div>
</body>
</html>
7. Google Maps JavaScript API を呼び出します 9. Google Maps JavaScript 呼び込み後位置情報を呼び出し、 11. getCurrentPosition()を呼び出します 18. getCurrentPosition 有効時の function 定義 19,20. 緯度･経度を小数点以下５桁で取得します 21-24. successCallback() の詳細情報をセットします 25. 位置情報を "txt_result" に書出します 27-31. Google Maps JavaScript を記述します 32. Google Maps JavaScript にマーカーを追加します 36. getCurrentPosition 無効時の function 定義 38-50. エラーコード毎の表示をセットします 52. エラーコード表示を Html タグに設定します 55-59. 位置情報取得オプションを指定(任意) 62-63. 出力エリアの書式を指定 68-69. 位置情報の出力エリアを指定