1. 現在位置の取得
Google Map Geolocation APIはブラウザに標準で組み込まれているため、APIキーを取得する必要はありません。Windows(ブラウザ)で確認する場合は位置情報の許可が必要です。
Windows 10/11の場合:
設定 > プライバシーとセキュリティ > 位置情報 >
- 位置情報サービスがオンになっていることを確認
- アプリの位置情報へのアクセスがオンになっていることを確認
スマホで確認する場合は、「位置情報アイコン」を有効にしたあとで、サイトを開いたときに位置情報の許可を「許可」しないとエラーになります。
<div>
<p id="status">現在位置を取得中</p>
<p id="latitude">latitude:</p>
<p id="longitude">longitude:</p>
</div>
<script>
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// JavaScriptで値を設定する
document.getElementById('status').textContent = '位置情報が取得できました';
document.getElementById('latitude').textContent = 'latitude: ' + latitude;
document.getElementById('longitude').textContent = 'longitude: ' + longitude;
}, function(error) {
// エラー時により詳細な情報を表示
let errorMessage = '';
switch(error.code) {
case error.PERMISSION_DENIED:
errorMessage = "位置情報の使用が許可されていません";
break;
case error.POSITION_UNAVAILABLE:
errorMessage = "位置情報を取得できませんでした";
break;
case error.TIMEOUT:
errorMessage = "位置情報の取得がタイムアウトしました";
break;
default:
errorMessage = "その他のエラー: " + error.message;
}
document.getElementById('status').textContent = '失敗' + errorMessage;
console.error(errorMessage);
});
} else {
document.getElementById('status').textContent = 'Geolocationはサポートされていません。';
}
</script>