Google Maps APIで住所検索を実装する(緯度経度を求める)

Google Maps APIでは、住所から緯度経度を求めたり、住所その周辺のmapを表示することができます。
今回は、Google Maps APIで住所から緯度経度を求めたり、住所周辺のmapを表示する方法について紹介します。

Contents

1 完成図
2 ソース
3 Google Maps APIのGeocoderの説明
4 まとめ

完成図

上の検索であなたの検索したい住所やランドマークを検索してみてください。
その位置へ地図が移動して、緯度経度が表示されるはずです。
今回は上記のような住所やランドマークで検索するとその場所の緯度経度を表示することができる地図検索のwebアプリを作成します。

ソース

ジオコーディングとは、住所を地理座標に変換する処理のことをいいます。また、逆の操作（座標を住所にする）を行うこともできます。この処理は「逆ジオコーディング」と呼ばれています。
参考先は：Googleコード>Geocoding Service

今回のwebアプリのソースは下記のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css">
      html { height: 90% }
      body { height: 95%; margin: 0; padding: 0 }
      #map_canvas { height: 90% }
    </style>
 
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=apiキー">
    </script>

 
  </head>
   
  <!-- ページが読み込まれたらinitialize()関数を実行 -->
  <body onload="initialize()">
    <!-- 地図を表示させる要素。widthとheightを必ず指定する。 -->
    <div id="map_canvas" style="width:100%; height:100%"></div>
    <input type="text" value="東京タワー" size="20" id="place">
    <button type="button" onclick="search()">検索</button><br />
    緯度：<span id="ido">35.6585805</span><br />
    経度：<span id="keido">139.74543289999997</span>
   <!-- initialize()関数を定義 -->
   <script type="text/javascript">
   
    var map;
    function initialize() {
      // 地図を表示する際のオプションを設定
      var mapOptions = {
        center: new google.maps.LatLng(35.6585805, 139.74543289999997),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      // Mapオブジェクトに地図表示要素情報とオプション情報を渡し、インスタンス生成
      map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
    }
    
    function search(){
       var place = document.getElementById('place').value;
       var geocoder = new google.maps.Geocoder();
       // ジオコーディング　検索実行
       geocoder.geocode({"address" : place}, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
            
            var lat = results[0].geometry.location.lat();//緯度を取得
            var lng = results[0].geometry.location.lng();//経度を取得
            var ido = document.getElementById('ido')
            ido.innerHTML = lat;
            var keido = document.getElementById('keido')
            keido.innerHTML = lng;
            var mark = {
                lat: lat, // 緯度
                lng: lng // 経度
            };
            marker = new google.maps.Marker({ // マーカーの追加
            position: mark, // マーカーを立てる位置を指定
            map: map // マーカーを立てる地図を指定
            });
            
            map.setCenter(results[0].geometry.location); // 地図の中心を移動
            cnt =0;
       }
       });
       //}
    }
    
  </script> 
  </body>
</html>

Google Maps APIのGeocoderの説明

ジオコードオブジェクトを作成し、geocode()methodで、Geocoderにリクエストを送信します。

コンストラクタ	説明
Geocoder()	ジオコードリクエストを Google サーバーに送信する Geocoder の新しいインスタンスを作成します。

Geocoder に送信するジオコーディングリクエストの仕様として次のプロパティがあります。

プロパティ	タイプ	説明
address	string	[省略可] 住所。
bounds	LatLngBounds	[省略可] 検索範囲用の LatLngBounds。
language	string	[省略可] 検索結果の優先する言語。
location	LatLng	[省略可] 検索用の LatLng。
region	string	[省略可] 地域コード ccTLDの2文字の値

addressプロパティには、検索する住所文字列を指定します。住所に日本語を指定できるようにするには、languageプロパティに「ja」を指定します。その他、国コード（regionプロパティ）、検索範囲（bounds）などを指定可能です。

リクエストが完了すると、callback関数に結果（GeocoderResultオブジェクト）とステータス（GeocoderStatusクラス）が渡されます。有効なジオコードが取得できたかどうかは、GeocoderStatusが「OK」になっているかどうかで判定します。

・ステータスコード
geocode() への呼び出しの完了時に、Geocoder によって返されるステータス。

定数	説明
ERROR	Google サーバーへの接続に問題が発生しました。
INVALID_REQUEST	GeocoderRequestは無効でした。一般的に、クエリ（address または latLng）が不足していることを示します。
OK	レスポンスには有効な GeocoderResponse が含まれています。ジオコードが成功したことを示します。
OVER_QUERY_LIMIT	ウェブページは、短期間にリクエストの制限回数を超えました。リクエストが割り当て量を超えていることを示します。
REQUEST_DENIED	ウェブページではジオコーダを使用できません。何らかの理由でリクエストが拒否されたことを示します。
UNKNOWN_ERROR	サーバーエラーのため、ジオコーディングリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。
ZERO_RESULTS	GeocoderRequestに対する結果が見つかりませんでした。ジオコードは成功しましたが、結果が返されなかったことを示します。遠隔地にある存在しない address または latng がジオコードに渡されると、このような状態になることがあります。

・レスポンス

フィールド			説明
types[]			取得結果の対象物の種類
formatted_address			郵便のあて先
address_components[]	types[]		住所の種類
	long_name		住所の名前
	short_name		住所の略称
geometry	location	lat	緯度
	location	lng	経度
	location_type		取得結果の精度
	viewport	southwest	ビューポートの南西の座標
	viewport	northeast	ビューポートの北東の座標
	bounds	southwest	境界ボックスの南西の座標
	bounds	northeast	境界ボックスの北東の座標