Googleマップ上にHTML5ジオロケーションの精度を最適な形で表示する方法

HTML5ジオロケーションの精度をGoogleマップで可視化するには？

HTML5のGeolocation APIで取得した現在地をGoogleマップに表示する場合、位置座標だけでなく精度（accuracy）もあわせて可視化すると、より実用的で信頼性の高いアプリになります。精度はメートル単位で返されるため、この値を半径とする円形オーバーレイをマップ上に描画するのが一般的な手法です。

基本的な実装コード

以下のコードでは、現在地を示すマーカーと、精度の範囲を表す半透明の円を組み合わせて表示しています。

var lat = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy; // 精度（メートル単位）
var center = new google.maps.LatLng(lat, longitude);

// 現在地を示すマーカーを作成
var marker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 6,
        fillColor: '#4285F4',
        fillOpacity: 1,
        strokeColor: '#FFFFFF',
        strokeWeight: 2
    }
});

// 精度範囲を表す円を描画
var mySphere = new google.maps.Circle({
    center: center,
    radius: accuracy,
    map: map,
    fillColor: '#4285F4',
    fillOpacity: 0.15,
    strokeColor: '#4285F4',
    strokeOpacity: 0.5
});

// 円全体が収まるように地図の表示範囲を自動調整
map.fitBounds(mySphere.getBounds());

Geolocation APIから取得できる主な値

• coords.latitude：緯度（10進法）
• coords.longitude：経度（10進法）
• coords.accuracy：位置の精度。95%の信頼度で、実際の位置がこの半径（メートル）内に含まれることを示します

見た目をカスタマイズするプロパティ

円のデザインは以下のプロパティで自由に調整できます。

• fillColor / fillOpacity：円の塗りつぶし色と不透明度（0〜1）。薄めの色にすると下の地図が見えやすくなります
• strokeColor / strokeOpacity：円の境界線の色と不透明度

fitBounds() の役割

最後の map.fitBounds(mySphere.getBounds()) は、描画した円が画面内にきれいに収まるよう、ズームレベルと中心位置を自動調整する処理です。精度が低い（円が大きい）場合でも、範囲全体が確認できるのでユーザー体験が向上します。

このようにマーカーと精度円を組み合わせることで、「現在地がおよそどこで、どの程度正確なのか」を直感的に伝えられるUIを実現できます。