デルタ システム ソリューションズ 株式会社

【住所⇔緯度・経度】位置情報の相互変換(2/3)

緯度・経度から住所を取得

次は、緯度・経度から住所を取得してみます。
緯度・経度から住所を取得する技術を『逆ジオコーディング』と言います。

【サンプル3】
 緯度・経度→住所

緯度:
経度:


★結果★
サンプル1の「大坂城」の検索で得られた結果の「緯度:34.6873153、経度:135.52620130000003」で実行すると、実は9つの結果が返ってきます。
同じポイントを表していますが、一番詳しい住所は1番目の結果となっています。
(サンプル3では1つ目の結果のみを表示しています。)
  1. 日本, 〒540-0002 大阪府大阪市中央区大阪城1−1
  2. 日本, 〒540-0002 大阪府大阪市中央区大阪城1
  3. 日本, 〒540-0002 大阪府大阪市中央区大阪城
  4. 日本, 大阪府大阪市中央区
  5. 日本, 大阪府大阪市
  6. 〒540-0002, 日本
  7. 日本, 大阪府
  8. 日本, Osaka Metropolitan Area
  9. 日本

【編集注】
上の結果は2016年12月当時のものです。
サンプル1と同様、時間とともに検索結果が変わっています。

2019年4月の検索結果はこちら。
  1. 日本、〒540-0002 大阪府大阪市中央区大阪城2−1 エレクトリックカー 桜門駅
  2. 日本、〒540-0002 大阪府大阪市中央区大阪城1
  3. 日本、〒540-0002 大阪府大阪市中央区大阪城
  4. 日本 〒540-0002
  5. 日本、大阪府大阪市中央区
  6. 日本、大阪府大阪市
  7. 日本、大阪府
  8. 日本

続いて、地図で表示してみましょう。

【サンプル4】
 緯度・経度→住所→Googleマップ表示

緯度:
経度:


「サンプル2」と同じ結果が得られるかと思いきや、若干緯度・経度がずれましたね・・・
逆ジオコーディングは、周辺の住所を取得するというのが実際の動きのようです。
サンプル3、サンプル4のソースはこちらです。
サンプル1、サンプル2とはパラメータが異なるだけですが、取得される結果が異なってきます。

【サンプル3ソース】
 緯度・経度→住所
<div>
  緯度:<input type="text" id="idoInput" value="34.6873153" style="width: 250px"><br />
  経度:<input type="text" id="keidoInput" value="135.52620130000003" style="width: 250px"><br />
  <input type="button" value="住所取得" onclick="getAddress();">
  <br /><br />
  ★結果★<br />
  <textarea id="addressOutput" rows="3" cols="26"></textarea>
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=xxxxxxxxxx"></script>
<!--「key=xxxxxxxxxx」にはGoogleで取得したAPIキーを記述します -->

<script type="text/javascript">
function getAddress(){

  //入力した緯度・経度を取得します。
  var idoInput = document.getElementById('idoInput').value;
  var keidoInput = document.getElementById('keidoInput').value;
  
  //緯度・経度をLatLngクラスに変換します。
  var latLngInput = new google.maps.LatLng(idoInput, keidoInput);

  //Google Maps APIのジオコーダを使います。
  var geocoder = new google.maps.Geocoder();
  
  //ジオコーダのgeocodeを実行します。
  //第1引数のリクエストパラメータにlatLngプロパティを設定します。
  //第2引数はコールバック関数です。取得結果を処理します。
  geocoder.geocode(
    {
      latLng: latLngInput
    },
    function(results, status) {
      
      var address = "";
      
      if (status == google.maps.GeocoderStatus.OK) {
      //取得が成功した場合
        
        //住所を取得します。
        address = results[0].formatted_address;
        
      } else if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
        alert("住所が見つかりませんでした。");
      } else if (status == google.maps.GeocoderStatus.ERROR) {
        alert("サーバ接続に失敗しました。");
      } else if (status == google.maps.GeocoderStatus.INVALID_REQUEST) {
        alert("リクエストが無効でした。");
      } else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
        alert("リクエストの制限回数を超えました。");
      } else if (status == google.maps.GeocoderStatus.REQUEST_DENIED) {
        alert("サービスが使えない状態でした。");
      } else if (status == google.maps.GeocoderStatus.UNKNOWN_ERROR) {
        alert("原因不明のエラーが発生しました。");
      }
      
      //住所の結果表示をします。
      document.getElementById('addressOutput').value = address;
    });

}
</script>

【サンプル4ソース】
 緯度・経度→住所→Googleマップ表示
<div>
  緯度:<input type="text" id="idoInput2" value="34.6873153" style="width: 250px"><br />
  経度:<input type="text" id="keidoInput2" value="135.52620130000003" style="width: 250px"><br />
  <input type="button" value="住所取得" onclick="getAddressMap2();">
  <br /><br />
  <div id="mapArea" style="width:250px; height:600px; border: 1px solid"></div>
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=xxxxxxxxxx"></script>
<!--「key=xxxxxxxxxx」にはGoogleで取得したAPIキーを記述します -->

<script type="text/javascript">
//地図の初期表示
new google.maps.Map(document.getElementById("mapArea"), {
  zoom: 5,
  center: new google.maps.LatLng(36,138),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

function getAddressMap2() {

  var idoInput = document.getElementById('idoInput2').value;
  var keidoInput = document.getElementById('keidoInput2').value;
  var latLngInput = new google.maps.LatLng(idoInput, keidoInput);
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({
    latLng: latLngInput
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

      //Mapクラスのインスタンスを生成します。
      var map = new google.maps.Map(
        document.getElementById("mapArea"),
        {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
      );
      
      //表示範囲クラスのインスタンスを生成します。
      var bounds = new google.maps.LatLngBounds();
      
      //緯度・経度情報を取得します。
      var latlng = results[0].geometry.location;

      //住所を取得します。
      var address = results[0].formatted_address;

      //取得した緯度・経度で表示範囲を拡張します。
      bounds.extend(latlng);

      //地図上に緯度・経度、住所の情報を表示します。
      new google.maps.InfoWindow(
        {
          content: "(緯度, 経度) = " + latlng.toString() +
                   "<br />" + address
        }
      ).open(
        map,
        new google.maps.Marker(
          {
            position: latlng,
            map: map
          }
        )
      );

      //表示範囲に移動します。
      map.fitBounds(bounds);
      //地図のズームを設定します。
      map.setZoom(15);

    } else if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
      alert("住所が見つかりませんでした。");
    } else if (status == google.maps.GeocoderStatus.ERROR) {
      alert("サーバ接続に失敗しました。");
    } else if (status == google.maps.GeocoderStatus.INVALID_REQUEST) {
      alert("リクエストが無効でした。");
    } else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
      alert("リクエストの制限回数を超えました。");
    } else if (status == google.maps.GeocoderStatus.REQUEST_DENIED) {
      alert("サービスが使えない状態でした。");
    } else if (status == google.maps.GeocoderStatus.UNKNOWN_ERROR) {
      alert("原因不明のエラーが発生しました。");
    }
  });
}
</script>

あなたへのおすすめ記事