はじめに

位置情報 API と逆ジオコーディングAPIを使ってブラウザで住所を取得する方法

TL;DR

  • 位置情報 は navigator.geolocation.getCurrentPosition で取得
    • 緯度(latitude), 経度(longitude), 精度(accuracy)などが取得可能
  • 緯度経度を使って逆ジオコーディング API で住所情報を取得
    • https://mreversegeocoder.gsi.go.jp/reverse-geocoder/LonLatToAddress?lat=<緯度>&lon=<経度>
    • 町名など(lv01Nm), 住所コード(muniCd) が取得可能
  • 住所コードを変換表にかけて都道府県などの情報を取得
    • 変換表: https://maps.gsi.go.jp/js/muni.js
    • GSI.MUNI_ARRAY[<muniCd>] で取得可能
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 詳細
    1. サンプル HTML
    2. 解説
  4. まとめ
  5. その他・メモ
  6. 参考文献

詳細

サンプル HTML

すごく雑に書いたサンプル、 <head> などは割愛。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<body>
  <button type="button" id="get-gps">位置情報取得</button>
  <p id="lat">緯度: </p>
  <p id="lon">経度: </p>
  <p id="address"></p>
</body>
<script>
  /** 変換表を入れる場所 */
  var GSI = {};

  const latEle = document.querySelector('#lat');
  const lonEle = document.querySelector('#lon');
  const addressEle = document.querySelector('#address');
  const gpsButton = document.querySelector('#get-gps');
  /**
   * 緯度経度を画面表示
   */
  const setGeoLoc = (coords) => {
    latEle.textContent = `緯度: ${coords.latitude}`;
    lonEle.textContent = `経度: ${coords.longitude}`;
  }
  /**
   * 緯度経度から住所を取得して表示
   */
  const getAddress = async (coords) => {
    // 逆ジオコーディング API
    const url = new URL('https://mreversegeocoder.gsi.go.jp/reverse-geocoder/LonLatToAddress');
    url.searchParams.set('lat', coords.latitude);
    url.searchParams.set('lon', coords.longitude);
    const res = await fetch(url.toString());
    const json = await res.json();
    const data = json.results;

    // 変換表から都道府県などを取得
    const muniData = GSI.MUNI_ARRAY[json.results.muniCd];
    // 都道府県コード,都道府県名,市区町村コード,市区町村名 に分割
    const [prefCode, pref, muniCode, city] = muniData.split(',');

    // 画面に反映
    address.textContent = `${pref} ${city} ${data.lv01Nm}`;
  };
  /**
   * 位置情報 API の実行(イベントリスナ)
   */
  gpsButton.addEventListener('click', () => {
    navigator.geolocation.getCurrentPosition(
      geoLoc => {
        setGeoLoc(geoLoc.coords);
        getAddress(geoLoc.coords);
      },
      err => console.error({err}),
    );
  });
</script>
<script src="https://maps.gsi.go.jp/js/muni.js"></script>  <!-- 変換表の読込 -->

CodePen、直接開いた方が良いかも: https://codepen.io/17num/pen/XWaYgLo

See the Pen Untitled by 17num (@17num) on CodePen.

解説

コード中にコメントも書いてるので参考リンクと合わせて見れば OK。

まとめ

  • 位置情報 は navigator.geolocation.getCurrentPosition で取得
    • 緯度(latitude), 経度(longitude), 精度(accuracy)などが取得可能
  • 緯度経度を使って逆ジオコーディング API で住所情報を取得
    • https://mreversegeocoder.gsi.go.jp/reverse-geocoder/LonLatToAddress?lat=<緯度>&lon=<経度>
    • 町名など(lv01Nm), 住所コード(muniCd) が取得可能
  • 住所コードを変換表にかけて都道府県などの情報を取得
    • 変換表: https://maps.gsi.go.jp/js/muni.js
    • GSI.MUNI_ARRAY[<muniCd>] で取得可能

その他・メモ

逆ジオコーディング API に関する公式ドキュメントを小一時間探したけど見つからず。

もう少し精度の良い住所情報が欲しい場合は他にも API がある。試してないし、有料のものもあるので参考レベル。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list