JSで緯度経度情報から住所を取得する

投稿日：2018年3月19日

1 はじめに
2 キーを取得する
- 2.1 キーを取得する
3 コード
4 参考
5 さいごに

はじめに

Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介します。

キーを取得する

Google Maps JavaScript APIを利用するにはキーを取得する必要があります。

キーを取得する

下記のページの「キーの取得」ボタンを押して「Create a new project」を選択します。

ポップアップが表示されたらプロジェクト名を入力して「NEXT」をクリックして暫く待つとAPIキーが表示されます。

https://developers.google.com/maps/documentation/javascript/?hl=ja

コード

位置情報から住所を取得するには逆ジオコーディングを利用します。

以下は東京駅の緯度経度情報から住所を取得するコードです。

 (function(){ var requestAjax = function(endpoint, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState==4 && this.status==200) { callback(this.response); } }; xhr.responseType = 'json'; xhr.open('GET',endpoint,true); xhr.send(); }; // 東京駅の緯度経度 var latitude = '35.6811673'; var longitude = '139.7648629'; var apiKey = 'your-key'; var requestURL = 'https://maps.googleapis.com/maps/api/geocode/json?language=ja&sensor=false'; requestURL += '&latlng=' + latitude + ',' + longitude; requestURL += '&key=' + apiKey; requestAjax(requestURL, function(response){ if (response.error_message) { console.log(response.error_message); } else { var formattedAddress = response.results[0]['formatted_address']; // 住所は「日本、〒100-0005 東京都千代田区丸の内一丁目」の形式 var data = formattedAddress.split(' '); if (data[1]) { // id=addressに住所を設定する document.getElementById('address').innerHTML = data[1]; } } }); })();

(function(){

var requestAjax = function(endpoint, callback) {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if (this.readyState==4 && this.status==200) {

callback(this.response);

}

};

xhr.responseType = 'json';

xhr.open('GET',endpoint,true);

xhr.send();

};

// 東京駅の緯度経度

var latitude = '35.6811673';

var longitude = '139.7648629';

var apiKey = 'your-key';

var requestURL = 'https://maps.googleapis.com/maps/api/geocode/json?language=ja&sensor=false';

requestURL += '&latlng=' + latitude + ',' + longitude;

requestURL += '&key=' + apiKey;

requestAjax(requestURL, function(response){

if (response.error_message) {

console.log(response.error_message);

} else {

var formattedAddress = response.results[0]['formatted_address'];

// 住所は「日本、〒100-0005 東京都千代田区丸の内一丁目」の形式

var data = formattedAddress.split(' ');

if (data[1]) {

// id=addressに住所を設定する

document.getElementById('address').innerHTML = data[1];

}

});

})();

参考

https://developers.google.com/maps/documentation/geocoding/intro?hl=ja#ReverseGeocoding

https://qiita.com/ikuwow/items/ed5f3c9ee0bd6147b7f3

さいごに

緯度経度情報から住所を検索する方法を紹介しました。

日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

JSで緯度経度情報から住所を取得する

はじめに

キーを取得する

キーを取得する

コード

参考

さいごに

フォロー

アプリ情報