JavaScript一覧

Google Maps APIで住所から緯度経度を求める

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

完成図

上の検索であなたの検索したい住所やランドマークを検索してみてください。
その位置へ地図が移動して、緯度経度が表示されるはずです。
今回は上記のような住所やランドマークで検索するとその場所の緯度経度を表示することができる地図検索の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 緯度
lng 経度
location_type 取得結果の精度
viewport southwest ビューポートの南西の座標
northeast ビューポートの北東の座標
bounds southwest 境界ボックスの南西の座標
northeast 境界ボックスの北東の座標

まとめ

今回は、Google Maps APIのGeocoding Serviceを利用して、住所からその場所の地図を表示するwebアプリを作成してみました。
住所から、緯度経度を求めることも結構簡単にできます。

Google Maps APIで住所周辺の緯度経度を求めないといけないwebアプリを作成する機会がある際には参考にしてください。