無料でジオコーディング(住所→経度緯度)を行う
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウントにてAPIキーを発行する必要があり非常に面倒くさい。とはいえOSM+leaflet.jsの組み合わせでも有用な情報が見つからず結局のところ地理院地図のジオコーダーを使う方法に落ち着いた。以下に方法をメモ。
サンプル
http://sample.taitan916.info/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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://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を選択肢の一つとする。
関連記事
-
-
JavaScriptでURLのクエリを取得する
やりたかった事はJavaScriptでGETのクエリを取得。 ■ソース var ...
-
-
画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
setTimeoutの注意点
javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...
-
-
FormDataを使ったAjax通信がiPhoneのみエラー
FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...
-
-
Ajaxで負荷軽減
業務中、専用のページでfile_get_contents的なものは あまり使わな ...
-
-
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...
-
-
jQueryでshow/hideよりaddClass/removeClassの方が速い
diaplay:none/blockする際に最近はshow()/hide()を ...
-
-
jQueryでformの各種パーツ(テキストボックス等)の操作まとめ
jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...
-
-
時間差をつけて処理する
setTimeout( 処理, タイムアウト時間 ); で、時間差をつけて処理が ...