Googleマップ API•テック

Google Maps（グーグルマップ）で場所から住所を検索する方法

2021年6月18日 by single コメントはまだありません

今回はグーグルマップの位置から住所を検索する方法となります。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Google Maps（グーグルマップ）で場所から住所を検索する方法

サンプル

マーカはドラッグ可能となっていますのでマーカーをドラッグさせてみてください。


HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Sample Map</title>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap&libraries=geometry" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:70%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      var geo;
      var marker;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 15,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         geo = new google.maps.Geocoder();
         marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            draggable: true
         });
         marker.addListener('dragend', function(event) {
            searchAddress();
         });
         searchAddress();
      }

   function searchAddress() {
         geo.geocode( { 'location': marker.position}, function(results, status) 
            {
               if (status == google.maps.GeocoderStatus.OK) {
                  setAddresses(results);
               } else {
                  alert("Geocode was not successful for the following reason: " + status);
               }
            }
         );
   }
   function setAddresses(results) {
      var nCount = results.length;
      var addressInfo = '';
      for ( var i=0; i < nCount; i++ ) {
         var result = results[i];
         if ( i > 0 ) {
            addressInfo = addressInfo + '<br />' + result.formatted_address;
         } else {
            addressInfo = result.formatted_address;
         }
      }
      document.getElementById('address').innerHTML = addressInfo;
   }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <br />
   <div id="address" ></div>
</body>
</html>

デモ

位置から住所を検索する

geocode

位置から住所を検索する際にも「geocode」メソッドを利用します。

   function searchAddress() {
         geo.geocode( { 'location': marker.position}, function(results, status) 
            {
               if (status == google.maps.GeocoderStatus.OK) {
                  setAddresses(results);
               } else {
                  alert("Geocode was not successful for the following reason: " + status);
               }
            }
         );
   }

geocodeメソッドで「location」プロパティを利用すれば、位置情報から住所を検索できます。

GeocoderResult

検索結果は「GeocoderResult」の配列で返ってきます。

   function setAddresses(results) {
      var nCount = results.length;
      var addressInfo = '';
      for ( var i=0; i < nCount; i++ ) {
         var result = results[i];
         if ( i > 0 ) {
            addressInfo = addressInfo + '<br />' + result.formatted_address;
         } else {
            addressInfo = result.formatted_address;
         }
      }
      document.getElementById('address').innerHTML = addressInfo;
   }

「geocode」メソッドの戻り値は「Array<GeocoderResult>」型なのでサンプルでは、配列数分、位置情報を取得しています。

住所情報はどこに格納されているのか？

GeocoderResultの「formatted_address」には、人が識別できるような形で住所が格納されています。

よって、サンプルでは「formatted_address」の内容をDIVエリアに展開するようにしてあります。

ただ、複数住所情報が検索され、どれが一番よいのかわからないのが難点ですかね。ただ、結構詳しく住所が出てくるので、場所がわかれば、ほぼ住所もわかりそうですね。

ご参考

関連ページ