GPS情報から住所を求めるHTMLアプリ
GPS情報から住所を求める JXA を投稿しました。
JXAは macOS で動きますので、WindowsやUNIX系の人には使えません。
そこで、ブラウザーで動作する HTML + Javascript のアプリ？を作った。
使い方は簡単で、このHTMLファイルをブラウザで開き、緯度と軽度をフィールドに入力して、ボタンを押すと住所が表示されるというもの。
エラーチェックは省略しているので、結果は無保証です。
ソースコード
このアプリでは、
. Google Maps Platform の ジオコーダ API
. Yahoo! の ジオコーダ API
の両方の結果を試すことができるようにしています。
GPS2Address.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>GPS to Address</title>
<style type="text/css"><!--
.big { font-size:12pt; }
--></style>
</head>
<body>
<h3>GPS情報（緯度、軽度） から 住所を求める</h3>
<div>
<h3>GPS情報</h3>
<form name="inputForm">
緯度<textarea class="big" name="lat" cols="15" rows="1">35.7121395</textarea>
, 経度<textarea class="big" name="lon" cols="15" rows="1">139.763451</textarea><br />
<input class="big" type="button" value="住所の取得(Google)" onclick="getAddressG();">
<input class="big" type="button" value="住所の取得(Yahoo!)" onclick="getAddressY();"><br />
</form>
<h3>住所</h3>
<form name="outForm">
<textarea class="big" name="outDataG" cols="80" rows="1"></textarea>
<textarea class="big" name="outDataY" cols="80" rows="1"></textarea>
</form>
</div>
<script language="javascript" type="text/javascript">
function getAddressG() {
const baseURL_G = 'https://maps.googleapis.com/maps/api/geocode/json?language=ja&'
const API_Key = '<YOUR_API_KEY>'
var lat = document.forms.inputForm.lat.textContent;
var lon = document.forms.inputForm.lon.textContent;
var url = baseURL_G + 'latlng=' + lat + ',' + lon + '&key=' + API_Key
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function () {
var data = this.response;
var jsonData = JSON.parse(data);
document.forms.outForm.outDataG.textContent = jsonData['results'][0]['formatted_address'];
};
request.send();
};
function getAddressY() {
const baseURL = 'https://map.yahooapis.jp/geoapi/V1/reverseGeoCoder?output=json&'
const APP_ID = '<YOUR_APP_ID>'
var lat = document.forms.inputForm.lat.textContent;
var lon = document.forms.inputForm.lon.textContent;
var url = baseURL + 'lat=' + lat + '&lon=' + lon + '&appid=' + APP_ID
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function () {
var data = this.response;
var jsonData = JSON.parse(data);
document.forms.outForm.outDataY.textContent = jsonData['Feature'][0]['Property']['Address'];
};
request.send();
};
</script>
</body>
</html>
<YOUR_API_KEY>、<YOUR_APP_ID> には、それぞれ、Google Maps の API-Key、Yahoo! の APP-ID をセットして実行します。
Google API Key と Yahoo! APP-ID
それぞれの利用方法はこちら
Yahoo! API の取得
Google Maps Javascript API