9ml

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>

ホームに戻る