「GoogleMaps API V3」ジオコーディング

「GoogleMaps API V3」の使い方その８（ジオコーディング）

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

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

先ず最初に、ジオコーディングのインスタンスをマップの生成と共に、初期処理にて生成しておきます。
[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=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」 の使い方その８（ジオコーディング）

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

■関連記事

「GoogleMaps API V3」の使い方その８（ジオコーディング）