「GoogleMaps API V3」 の使い方その8(ジオコーディング)


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

ジオコーディングを使って、文字列の住所から緯度・経度を取得し、その位置にマーカーを表示します。
住所には最初「福井市大手1丁目1-1」が設定されていますが「福井市大手1丁目3-1」などと異なる住所を入力し、 [Geocode]ボタンをクリックすると別の位置にマーカーが順次表示されます。


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

コールバック関数は results,status の引数を持ち、statusがOKでなければエラーが発生しています。
statusがOKの場合、resultsGeocoderResultオブジェクトの配列として返されてきます。 返された配列の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=MyKeyCode" 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>

■関連記事
「GoogleMaps API V3」の使い方その1
「GoogleMaps API V3」の使い方その2
「GoogleMaps API V3」の使い方その3(マーカーの表示)
「GoogleMaps API V3」の使い方その4(イベント)
「GoogleMaps API V3」の使い方その5(続イベント)
「GoogleMaps API V3」の使い方その6(続々イベント)
「GoogleMaps API V3」の使い方その7(ポリライン・ポリゴン)
「GoogleMaps API V3」の使い方その9(ルート検索)
「GoogleMaps API V3」の使い方その10(ルート検索2)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る