Google Maps JavaScript API v3ジオコーディング
- 指定した住所の緯度・経度を検索〔ジオコード〕
- 緯度・経度から住所を検索〔逆ジオコード〕
指定した住所の緯度・経度を検索
ジオコード
2011/6/26
Google Maps JavaScript API V3 - Geocoderクラス
ジオコードは、指定した住所を検索し、緯度・経度の地理的な座標に変換するサービスです。
ジオコードオブジェクトを作成し、geocode()メソッドで、Geocoderにリクエストを送信します。 addressプロパティには、検索する住所文字列を指定します。 住所に日本語を指定できるようにするには、languageプロパティに「ja」を指定します。 その他、国コード(regionプロパティ)、検索範囲(bounds)などを指定可能です。
/* ジオコードオブジェクト */ var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': 住所文字列, 'language': 'ja' }, function(results, status){ if(status==google.maps.GeocoderStatus.OK){ /* 処理 */ } } );
リクエストが完了すると、callback関数に結果(GeocoderResultオブジェクト)とステータス(GeocoderStatusクラス)が渡されます。 有効なジオコードが取得できたかどうかは、GeocoderStatusが「OK」になっているかどうかで判定できます。
結果はJSON形式で返されます。 GeocoderAddressComponentの配列になっており、指定した住所によっては、複数の結果が含まれる場合もあります。
結果の緯度・経度の地理的な座標(LatLng)は、GeocoderGeometryオブジェクトのlocationプロパティで取得できます。
設置サンプル
指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。 検索のたびに地図上に描画したオーバーレイは削除するようにしています。
例えば「東京タワー」で検索すると、「35.65861,139.745447」という緯度・経度を取得することができます。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <title>設置サンプル - GMAPv3 - ジオコーディング</title> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var geocoder, map; /* 地図上に追加されたオーバーレイを格納する配列 */ var overlays = []; $(function(){ initialize(); $("#btn").bind("click",function(){ codeAddress(); }).trigger("click"); }); /* 地図の初期化 */ function codeAddress() { var address=$("#address").val(); geocoder.geocode( { 'address': address, 'language': 'ja'}, function(results, status) { if(status==google.maps.GeocoderStatus.OK){ /* オーバーレイ消去 */ if(overlays.length>0){ for(i in overlays){ overlays[i].setMap(null); } overlays.length=0; } /* 地図の中心点を変更 */ map.setCenter(results[0].geometry.location); /* 指定された境界に合うように地図を表示 */ if(results[0].geometry.bounds)map.fitBounds(results[0].geometry.bounds); if(results[0].geometry.viewport)map.fitBounds(results[0].geometry.viewport); /* マーカー */ var marker = new google.maps.Marker({ map:map, position: results[0].geometry.location }); var contentString=""; contentString+="◆住所<br> "+address+"<br>"; contentString+="◆緯度・経度<br> "+results[0].geometry.location.toUrlValue()+"<br>"; contentString+="◆位置タイプ<br> "+results[0].geometry.location_type+"<br>"; contentString+="◆正確な境界<br> "+results[0].geometry.bounds+"<br>"; contentString+="◆推奨されるviewportの境界<br> "+results[0].geometry.viewport+"<br>"; contentString+="◆結果のジオコード要素タイプ<br>"; for(var i in results[0].types){ contentString+=" "+results[0].types[i]+"<br>"; } /* 情報ウィンドウ */ infowindow=new google.maps.InfoWindow({ content: contentString, maxWidth: 250 }); infowindow.open(map, marker); overlays=[marker, infowindow] }else{ alert("ジオコードの取得に失敗しました\n"+status); } }); return false; } function initialize(){ /* ジオコードオブジェクト */ geocoder = new google.maps.Geocoder(); /* 緯度・経度:日本 */ var myLatlng=new google.maps.LatLng(36.204824,138.252924); /* 地図のオプション設定 */ var myOptions={ /*初期のズーム レベル */ zoom: 2, /* 地図の中心点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body> <h1>設置サンプル - GMAPv3 - ジオコーディング</h1> <p> 指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。</p> <form onsubmit="return false;"> <input type="text" id="address" value="東京タワー" /> <input type="button" id="btn" value="住所から緯度・経度を取得" /> </form> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
緯度・経度から住所を検索
逆ジオコード
2011/6/26
ジオコードでは、住所から緯度・経度を検索しますが、その逆で、指定した緯度・経度から、住所を検索することができます。
geocode()メソッドで、Geocoderにリクエストを送信する際、LatLngプロパティに、検索する緯度・経度の地理的な座標位置をLatLngで指定します。
設置サンプル
下記の例では、指定した緯度・経度から住所を検索します。 例えば、東京タワーの場合は、緯度・経度(35.65861,139.745447)で検索すると、「日本, 東京都港区芝公園4丁目2−8」という住所を取得できます。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <title>設置サンプル - GMAPv3 - 逆ジオコーディング</title> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var geocoder, map; /* 地図上に追加されたオーバーレイを格納する配列 */ var overlays = []; $(function(){ initialize(); $("#btn").bind("click",function(){ codeLatLng(); }).trigger("click"); }); /* 地図の初期化 */ function codeLatLng() { var latlngStr=$("#latlng").val().split(","); var lat=parseFloat(latlngStr[0]); var lng=parseFloat(latlngStr[1]); var latlng=new google.maps.LatLng(lat, lng); geocoder.geocode({'latLng': latlng, 'language': 'ja'}, function(results, status) { if(status==google.maps.GeocoderStatus.OK){ /* オーバーレイ消去 */ if(overlays.length>0){ for(i in overlays){ overlays[i].setMap(null); } overlays.length=0; } /* 地図の中心点を変更 */ map.setCenter(results[0].geometry.location); /* 指定された境界に合うように地図を表示 */ if(results[0].geometry.bounds)map.fitBounds(results[0].geometry.bounds); if(results[0].geometry.viewport)map.fitBounds(results[0].geometry.viewport); /* マーカー */ var marker = new google.maps.Marker({ map:map, position: results[0].geometry.location }); var contentString=""; contentString+="◆住所<br> "+results[0].formatted_address+"<br>"; contentString+="◆緯度・経度<br> "+results[0].geometry.location.toUrlValue()+"<br>"; contentString+="◆位置タイプ<br> "+results[0].geometry.location_type+"<br>"; contentString+="◆正確な境界<br> "+results[0].geometry.bounds+"<br>"; contentString+="◆推奨されるviewportの境界<br> "+results[0].geometry.viewport+"<br>"; contentString+="◆結果のジオコード要素タイプ<br>"; for(var i in results[0].types){ contentString+=" "+results[0].types[i]+"<br>"; } /* 情報ウィンドウ */ infowindow=new google.maps.InfoWindow({ content: contentString, maxWidth: 250 }); infowindow.open(map, marker); overlays=[marker, infowindow] }else{ alert("ジオコードの取得に失敗しました\n"+status); } }); return false; } function initialize(){ /* ジオコードオブジェクト */ geocoder = new google.maps.Geocoder(); /* 緯度・経度:日本 */ var myLatlng=new google.maps.LatLng(36.204824,138.252924); /* 地図のオプション設定 */ var myOptions={ /*初期のズーム レベル */ zoom: 2, /* 地図の中心点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body> <h1>設置サンプル - GMAPv3 - 逆ジオコーディング</h1> <p> 指定した緯度・経度から、住所を検索し、マーカーと情報ウィンドウを表示します。</p> <form onsubmit="return false;"> <label for="latlng">緯度・経度(カンマ区切り):</label><input type="text" id="latlng" value="35.65861,139.745447" /> <input type="button" id="btn" value="住所から緯度・経度を取得" /> </form> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>