geolocation API（位置取得） — navigator.geolocation.getCurrentPosition(p => {})
ブラウザには「現在地を取得する」ための Geolocation API が用意されています。スマホやPCの位置情報サービスを使って、緯度・経度を取得できます。地図表示や「近くのお店検索」などに使われます。
基本のコード例
<button id="btn">位置を取得</button>
<div id="out"></div>
<script>
const out = document.getElementById("out");
document.getElementById("btn").addEventListener("click", () => {
// 位置情報を取得
navigator.geolocation.getCurrentPosition(
(pos) => {
// 成功時
const lat = pos.coords.latitude;
const lon = pos.coords.longitude;
out.textContent = `緯度: ${lat}, 経度: ${lon}`;
},
(err) => {
// 失敗時
out.textContent = "位置情報が取得できませんでした: " + err.message;
}
);
});
</script>
getCurrentPosition(success, error): 現在地を1回だけ取得。- 成功時:
pos.coords.latitude（緯度）、pos.coords.longitude（経度）、accuracy（誤差メートル）などが得られる。 - 失敗時: ユーザーが拒否した場合や端末が位置を特定できない場合に
errorが呼ばれる。
よく使うテンプレート集
常に監視する（移動に追従）
const watchId = navigator.geolocation.watchPosition(
(pos) => {
console.log("現在地:", pos.coords.latitude, pos.coords.longitude);
},
(err) => {
console.error("エラー:", err.message);
}
);
// 停止する場合
navigator.geolocation.clearWatch(watchId);
オプションを指定する
navigator.geolocation.getCurrentPosition(success, error, {
enableHighAccuracy: true, // 高精度（GPS）を優先
timeout: 5000, // 5秒でタイムアウト
maximumAge: 0 // キャッシュを使わない
});
例題: Google Maps に現在地を表示
<div id="map" style="width:400px;height:300px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
navigator.geolocation.getCurrentPosition((pos) => {
const lat = pos.coords.latitude;
const lon = pos.coords.longitude;
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat, lng: lon },
zoom: 15
});
new google.maps.Marker({
position: { lat, lng: lon },
map: map,
title: "現在地"
});
});
</script>
- 効果: 現在地を地図に表示。Google Maps APIを利用。
実務でのコツ
- ユーザー許可が必要: 初回は「位置情報を許可しますか？」とブラウザが確認。拒否される可能性もある。
- 精度の違い: PCはWi-FiやIPから推定、スマホはGPSで高精度。
- エラー処理必須: 拒否やタイムアウトに備えて
errorコールバックを書く。 - プライバシー: 位置情報は個人情報なので、利用目的を明示するのが大切。
- リアルタイム追跡:
watchPositionを使うと移動に合わせて更新できる。
ありがちなハマりポイントと対策
- 位置が取れない:
- 原因: HTTPSでないと動作しないブラウザが多い。
- 対策: サイトを
https://で提供する。
- 精度が低い:
- 対策:
enableHighAccuracy: trueを指定。ただしバッテリー消費が増える。
- 対策:
- ユーザーが拒否:
- 対策: エラーメッセージを表示し、機能が使えないことを伝える。
練習問題（現在地を定期更新して表示）
<div id="pos"></div>
<script>
const posDiv = document.getElementById("pos");
const id = navigator.geolocation.watchPosition(
(pos) => {
posDiv.textContent = `緯度:${pos.coords.latitude}, 経度:${pos.coords.longitude}`;
},
(err) => {
posDiv.textContent = "取得失敗: " + err.message;
},
{ enableHighAccuracy: true }
);
// 10秒後に監視停止
setTimeout(() => navigator.geolocation.clearWatch(id), 10000);
</script>
- 効果: 10秒間だけ現在地を追跡して表示。
直感的な指針
navigator.geolocation.getCurrentPosition= 「今の位置を1回取得」。- 成功時は
coords.latitude/coords.longitudeを使う。 - 失敗時の処理を必ず書く。
- HTTPS環境で動かすことが必須。
- 移動に追従したいなら
watchPosition。
これを覚えれば「現在地を表示する」「地図にマーカーを置く」「移動を追跡する」といった基本的な位置情報アプリが作れるようになります。