勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

   2024/01/16  jQuery JavaScript

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウントにてAPIキーを発行する必要があり非常に面倒くさい。とはいえOSM+leaflet.jsの組み合わせでも有用な情報が見つからず結局のところ地理院地図のジオコーダーを使う方法に落ち着いた。以下に方法をメモ。

 

サンプル

https://taitan916.info/sample/osm/geocoder.php

住所を入力し「経度緯度取得」をクリックすると経度・緯度がテキストボックスに入る。

 

ソース

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ジオコーディング</title>
</head>
<body>

住所<input type="text" name="address" id="address"><br>
経度<input type="text" name="lat" id="lat"><br>
経度<input type="text" name="lng" id="lng"><br>
<a href="javascript:void(0);" onclick="return getLatLng();">経度緯度取得</a>

<div id="map"></div>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
function getLatLng(){
    var address = $('#address').val();
    $.ajax({
        url:'https://msearch.gsi.go.jp/address-search/AddressSearch?q=' + address, 
        }).done(function(res, textStatus, jqXHR) {

        if( res.length ){
            var latlng = res[0].geometry.coordinates;
            $('#lat').val(latlng[0]);
            $('#lng').val(latlng[1]);
        }
    });
}
</script>
</body>
</html>

ajax通信でジオコーダーに接続している。lengthが0の(結果が無い)場合は何もしないようにしているが、もうちょっとエラーチェックは入れたほうが良さそう。

尚、以下がリファレンスになる。

https://ucopendb.gsi.go.jp/ucode/help_with_API.html

 

OpenStreetMapのAPI

OSMでもAPIがあり以下のような形で接続できる。

http://nominatim.openstreetmap.org/search?format=json&q=住所

しかしながら地理院よりも大幅に劣り、例えば「東京タワー」と入力すると正常に経度緯度を取得できるが、「東京都港区芝公園４丁目２−８」とかだと取得できず実際に使用するにはまだまだ厳しそう。

 

leaflet.jsのプラグイン

Leaflet Control OSM Geocoderというプラグインを使用すると地図から場所を検索するという機能を追加できる。しかしこちらでテキストボックスを用意し、何らかのアクションを起こした際に経度緯度を取得すると言う方法が分からなかった。

また、どの道OSMのジオコーダーを使うのであれば地理院やGoogleMapAPIクラスの精度は出ないのかもしれない。

 

所感

leaflet.jsとOSMで何とかしたかったので結論が出るまでにだいぶ時間をかけてしまった。しかしながら無料で面倒くさい手続き無く、ある程度精度の高いジオコーディングができればどのサービスでも良い。今後ジオコーディングが必要な際は地理院APIを選択肢の一つとする。

 - jQuery JavaScript

  関連記事

jQueryで偶数or奇数行に任意のClassを付与する方法

tableタグの1行目を除く偶数もしくは奇数行のtrタグに任意にClassを指定 ...

FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

jQueryプラグインのDateTimePickerで年月日と時間のピッカーを実装する方法

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

「display: block !important;」指定された要素をjQueryで非表示にする方法

jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表 ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...