「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を参照します。

01<head>
02<title>Google Map API v3-8</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05var geocoder; //ジオコーディングのインスタンス
06var map;      //マップのインスタンス
07var gs = google.maps.GeocoderStatus;//ジオコーディング結果のステータス
08var geocoderErr = new Array(); //ジオコーディング結果のエラーメッセージ
09geocoderErr[gs.ERROR] = "Google サーバーへの接続に問題が発生しました。";
10geocoderErr[gs.INVALID_REQUEST] = "この GeocoderRequest は無効でした。";
11geocoderErr[gs.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
12geocoderErr[gs.REQUEST_DENIED] = "ウェブページではジオコーダを使用できません。";
13geocoderErr[gs.UNKNOWN_ERROR] = "サーバー エラーのため、ジオコーディング リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
14geocoderErr[gs.ZERO_RESULTS] = "この GeocoderRequest に対する結果が見つかりませんでした。";
15// Onload時処理
16function initialize() {
17    // ジオコーディングの生成
18    geocoder = new google.maps.Geocoder();
19    // Google Mapで利用する初期設定用の変数
20    var mapOptions = {
21        zoom: 15,
22        mapTypeId: google.maps.MapTypeId.ROADMAP,
23        center: new google.maps.LatLng(36.062092, 136.223323)
24    };
25    // GoogleMapの生成
26    map = new google.maps.Map(document.getElementById("map"), mapOptions);
27}
28// [Geocode]ボタン処理
29function codeAddress() {
30    // テキストボックスから住所を取得
31    var address = document.getElementById("address").value;
32    // ジオコーディングを依頼する
33    geocoder.geocode(
34        {'address': address}, // ジオコーディング リクエスト
35        function(results, status) { // ジオコーディング結果callback関数
36            if (status == gs.OK) { // 結果がOK ??
37                // マップ中心設定
38                map.setCenter(results[0].geometry.location);
39                // マーカー設定
40                var marker = new google.maps.Marker({
41                    map: map, 
42                    position: results[0].geometry.location
43                });
44            } else {
45                // 結果がOKではない場合
46                alert("ジオコーディングが失敗しました。理由: " + geocoderErr[status]);
47            }
48        });
49}
50</script> 
51</head> 
52<body onload="initialize();">
53  <div id="map" style="width: 300px; height: 300px;"></div>
54  <div>
55    <input id="address" type="textbox" value="福井市大手1丁目1-1" size="40" >
56    <input type="button" value="Geocode" onclick="codeAddress()">
57  </div>
58</body>
59</html>

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

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

■関連記事

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