おやじプログラマー日記 : 「GoogleMap API V3」の使い方その８（ジオコーディング）

■ジオコーディングより住所文字列から緯度・経度を取得

ジオコーディングを使って、文字列の住所から緯度・経度を取得し、その位置にマーカーを表示します。

ジオコーディングのインスタンスをマップの生成と共に、初期処理にて生成しておきます。 [Geocode]ボタンをクリックされた時に、ジオコーディングの geocode メソッドを利用してジオコーディングのリクエストを行います。ジオコーディング化の結果はgeocode メソッドで宣言された、コールバック関数に帰ってきます。

コールバック関数は results, status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、resultsはGeocoderResultオブジェクトの配列として返されてきます。返された配列の0番目の値にジオコーディング結果が入っています。 results[0]のプロパティとしてaddress_components、geometry、typesがありますが、緯度・経度の値はgeometryのlocationを参照します。 <head> <title>Google Map API v3-8</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> var geocoder; //ジオコーディングのインスタンス var map; //マップのインスタンス var gs = google.maps.GeocoderStatus;//ジオコーディング結果のステータス var geocoderErr = new Array(); //ジオコーディング結果のエラーメッセージ geocoderErr[gs.ERROR] = "Google サーバーへの接続に問題が発生しました。"; geocoderErr[gs.INVALID_REQUEST] = "この GeocoderRequest は無効でした。"; geocoderErr[gs.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; geocoderErr[gs.REQUEST_DENIED] = "ウェブページではジオコーダを使用できません。"; geocoderErr[gs.UNKNOWN_ERROR] = "サーバーエラーのため、ジオコーディングリクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; geocoderErr[gs.ZERO_RESULTS] = "この GeocoderRequest に対する結果が見つかりませんでした。"; // Onload時処理 function initialize() { // ジオコーディングの生成 geocoder = new google.maps.Geocoder(); // Google Mapで利用する初期設定用の変数 var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(36.062092, 136.223323) }; // GoogleMapの生成 map = new google.maps.Map(document.getElementById("map"), mapOptions); } // [Geocode]ボタン処理 function codeAddress() { // テキストボックスから住所を取得 var address = document.getElementById("address").value; // ジオコーディングを依頼する geocoder.geocode( {'address': address}, // ジオコーディングリクエスト function(results, status) { // ジオコーディング結果callback関数 if (status == gs.OK) { // 結果がOK ?? // マップ中心設定 map.setCenter(results[0].geometry.location); // マーカー設定 var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { // 結果がOKではない場合 alert("ジオコーディングが失敗しました。理由: " + geocoderErr[status]); } }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 300px; height: 300px;"></div> <div> <input id="address" type="textbox" value="福井市大手1丁目1-1" size="40" > <input type="button" value="Geocode" onclick="codeAddress()"> </div> </body> </html>