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で緯度経度情報から住所を取得する

はじめに

キーを取得する

キーを取得する

コード

参考

さいごに

フォロー

アプリ情報