HTML5ジオロケーションやGoogle APIで緯度経度を取得する方法を解説

Webアプリケーションでユーザーの現在地情報を扱いたい場合、HTML5のGeolocation APIやGoogleの各種APIを利用することで、住所から緯度経度（またはその逆）を簡単に取得できます。本記事では、JavaScriptを使った基本的な実装方法を解説します。

HTML5ジオロケーションで現在位置を取得する

HTML5のGeolocation APIは、ブラウザ標準で提供されている機能です。navigator.geolocationが利用可能かどうかを判定し、getCurrentPosition()メソッドを呼び出すことで、ユーザーの現在位置（緯度・経度）を取得できます。

基本的なスクリプトは以下のとおりです。

if (navigator.geolocation) {

    /* 現在位置の取得に成功した場合はsuccessFuncが、
       失敗した場合はerrorFuncが呼び出されます。
       失敗時には個別のエラーメッセージを表示します */
    navigator.geolocation.getCurrentPosition(successFunc, errorFunc);

} else {
    alert('お使いのブラウザではジオロケーションが有効になっていません。最新の対応ブラウザをご利用ください。');
}

成功時のコールバック関数の例

位置情報の取得に成功すると、successFuncにPositionオブジェクトが渡されます。以下のようにして緯度経度を取り出せます。

function successFunc(position) {
    const lat = position.coords.latitude;   // 緯度
    const lng = position.coords.longitude;  // 経度
    console.log(`緯度: ${lat}, 経度: ${lng}`);
}

エラー処理の例

ユーザーが位置情報の共有を拒否した場合や、タイムアウトが発生した場合にはerrorFuncが実行されます。エラーの種類に応じてメッセージを出し分けると、より親切なUIになります。

function errorFunc(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            alert('位置情報の利用が許可されていません。');
            break;
        case error.POSITION_UNAVAILABLE:
            alert('現在位置を取得できませんでした。');
            break;
        case error.TIMEOUT:
            alert('位置情報の取得がタイムアウトしました。');
            break;
        default:
            alert('不明なエラーが発生しました。');
            break;
    }
}

Google API（Geocoding API）で住所から緯度経度を取得する

特定の住所文字列から緯度経度を求めたい場合は、Googleが提供するGeocoding APIが便利です。以下のようにHTTPリクエストを送信することで、JSON形式で結果を取得できます。

const address = '東京都千代田区丸の内1-9-1';
const apiKey = 'YOUR_API_KEY';

fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}&key=${apiKey}`)
    .then(response => response.json())
    .then(data => {
        if (data.status === 'OK') {
            const location = data.results[0].geometry.location;
            console.log(`緯度: ${location.lat}, 経度: ${location.lng}`);
        } else {
            console.error('ジオコーディングに失敗しました:', data.status);
        }
    });

注意点

• HTTPSが必須：Geolocation APIはセキュリティ上の理由から、HTTPS環境でのみ動作します。
• ユーザーの許可が必要：位置情報の取得には、必ずユーザーの同意が必要です。
• APIキーの管理：Google APIを使用する場合は、APIキーを取得し、不正利用を防ぐためにキーの制限設定を行いましょう。
• 課金体系の確認：Geocoding APIは利用回数に応じた課金が発生するため、料金プランを事前に確認してください。

これらの方法を組み合わせることで、「現在地の取得」と「住所⇔緯度経度の変換」の両方に柔軟に対応できるWebアプリケーションを構築できます。