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

コメント、ご指摘、歓迎します！