GPS情報から住所を求めるHTMLアプリ

## GPS情報から住所を求めるHTMLアプリ
　GPS情報から住所を求める JXA を投稿しました。

https://qiita.com/ynomura/items/8524e489c17b053f3c6d

　JXAは macOS で動きますので、WindowsやUNIX系の人には使えません。
そこで、ブラウザーで動作する HTML + Javascript のアプリ？を作った。

　使い方は簡単で、このHTMLファイルをブラウザで開き、緯度と軽度をフィールドに入力して、ボタンを押すと住所が表示されるというもの。
　エラーチェックは省略しているので、結果は無保証です。
![スクリーンショット 2023-04-20 17.55.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/0a5d0440-42d6-0db5-278e-140cb84dfd3b.png)

## ソースコード
　このアプリでは、
. [Google Maps Platform の ジオコーダ API](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/reversegeocoder.html)
. [Yahoo! の ジオコーダ API](https://qiita.com/ynomura/items/8524e489c17b053f3c6d#:~:text=%E3%82%B8%E3%82%AA%E3%82%B3%E3%83%BC%E3%83%80%20API%0A.-,Yahoo!%20%E3%81%AE%20%E3%82%B8%E3%82%AA%E3%82%B3%E3%83%BC%E3%83%80%20API,-Google%20Maps%20API)
の両方の結果を試すことができるようにしています。

```javascript: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>
```
 &LT;YOUR_API_KEY&GT;、&LT;YOUR_APP_ID&GT; には、それぞれ、Google Maps の API-Key、Yahoo! の APP-ID をセットして実行します。

### Google API Key と Yahoo! APP-ID
それぞれの利用方法はこちら

[Yahoo! API の取得](https://developer.yahoo.co.jp/start/)
[Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript?hl=ja)

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