HTMLジオロケーションの基本と使い方を徹底解説
HTMLのGeolocation APIは、ユーザーの許可を得た場合にのみ、そのユーザーの現在の地理的な位置情報をリアルタイムで取得できる機能です。地図アプリでの現在地表示、近くの店舗検索、天気情報の提供など、幅広い用途に活用されています。緯度・経度の取得にはJavaScriptを使用します。
注意： Google Chrome 50以前のバージョンでは、HTTP経由でもジオロケーションのリクエストが承認されていましたが、Chrome 50以降はHTTPS経由のリクエストのみが許可され、HTTP経由のリクエストは無視されるようになりました。安全な通信環境での利用が必須となっている点に留意してください。
構文
ジオロケーションの基本的な構文は以下の通りです。
navigator.geolocation.getCurrentPosition()
getCurrentPosition()メソッドが返すオブジェクトには、以下のプロパティが含まれます。
| プロパティ | 戻り値 |
|---|---|
| coords.latitude | 10進数形式の地理的な緯度 |
| coords.longitude | 10進数形式の地理的な経度 |
| coords.accuracy | 位置情報の精度（メートル単位） |
| coords.altitude | 平均海面からの高度（メートル単位） |
| coords.altitudeAccuracy | 高度の精度 |
| coords.heading | 真北から時計回りに測った進行方向（度） |
| coords.speed | 移動速度（メートル毎秒） |
| timestamp | レスポンスの日時 |
続いて、HTMLジオロケーションでエラーハンドリングを行う具体的な例を見ていきましょう。以下のサンプルコードでは、「位置情報を更新」するボタンと「検索」するボタンを実装し、位置情報の取得結果や各種エラー発生時のメッセージを画面に表示しています。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-Geolocation</legend>
<input type="button" value="Update Location" onclick="updateLocation()">
<input type="button" value="Search" onclick="searchLoc()">
<div id="divDisplay">Current Location:</div>
<div>
<span id="latitude">Latitude: 42.9177901</span>
<span id="longitude">Longitude: -75.8114698</span>
</div>
<script>
var latObj = document.getElementById("latitude");
var longObj = document.getElementById("longitude");
var divDisplay = document.getElementById("divDisplay");
function searchLoc(){
var lat = latObj.textContent.split(": ")[1];
var long = longObj.textContent.split(": ")[1];
var url = "https://www.google.com/maps/@"+lat+","+long+",8.58z";
browseWindow = window.open(url, "browseWindow", "width=400, height=200");
}
function updateLocation(){
browseWindow.close();
var user = navigator.geolocation;
if (user)
user.getCurrentPosition(updatePosition, errorHandler);
else
divDisplay.textContent = "Geolocation is not supported in this browser";
}
function updatePosition(position) {
divDisplay.innerHTML = 'Location Updated<br>Current Location:';
latObj.textContent = 'Latitude: '+position.coords.latitude;
longObj.textContent = 'Longitude: '+position.coords.longitude;
}
function errorHandler(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
divDisplay.textContent = "You denied the request to get Geolocation"
break;
case error.POSITION_UNAVAILABLE:
divDisplay.textContent = "Your location information is unavailable"
break;
case error.TIMEOUT:
divDisplay.textContent = "The request to get your location timed out"
break;
case error.UNKNOWN_ERROR:
divDisplay.textContent = "Unknown error occurred"
break;
}
}
</script>
</body>
</html>
動作確認
1) ボタンをクリックする前の初期状態
2) 「Search」ボタンをクリックした後
指定した緯度経度をもとに、Googleマップが新しいウィンドウで開きます。
3) 「Update Location」ボタンをクリックした後
ユーザーが位置情報へのアクセスを許可すると、最新の緯度・経度が画面に表示されます。
4) 再度「Search」ボタンをクリックした後
更新された位置情報をもとに、Googleマップ上で現在地を確認できます。
5) 「Update Location」ボタンをクリックし、ユーザーが位置情報アクセスを拒否した場合
PERMISSION_DENIEDエラーが発生し、適切なエラーメッセージが表示されます。
-
HTMLのnavigator.geolocationプロパティとは？使い方とサンプルコードを解説
HTMLの navigator.geolocation プロパティは、ユーザーの現在位置情報を取得するための Geolocation オブジェクト を返します。このオブジェクトを利用することで、JavaScriptからユーザーの緯度・経度などの位置情報にアクセスできます。 基本構文 navigator.geolocation プロパティの書き方は以下のとおりです。 navigator.geolocation Geolocationオブジェクトの主なメソッド getCurrentPosition()：ユーザーの現在位置を1回だけ取得します。 watchPosition()：位置の変化を継続的に
-
HTMLエディターとは？代表的な無料エディターの特徴を徹底解説
HTMLエディターとはHTMLエディターとは、HTMLドキュメントの作成・編集を行い、場合によってはその場で実行までできるツールのことです。現在では、無料・有料を問わず、プロフェッショナル向けの高機能なHTMLエディターが数多く提供されています。Windows標準のメモ帳（Notepad）にはない、テーマのカスタマイズやターミナル連携といった付加機能を備えたエディターも多く、用途やスキルレベルに合わせて選ぶことができます。ここでは、特によく使われている代表的なHTMLエディターをご紹介します。Notepad（メモ帳）最も基本的な無料HTMLエディターの一つです。Windowsに標準搭載されてお