住所から座標を取得

まずジオコーディングの機能を利用するためのGClientGeocoderクラスのオブジェクトを作成します。コンストラクタ関数は次のように定義されています。

GClientGeocoder(cache?:GGeocodeCache)

Google サーバーと直接通信するジオコーダの新しいインスタンスを作成します。
オプションのキャッシュ パラメータにより、不明な住所のカスタムのクライア
ント側キャッシュを指定できます。何も指定していない場合、
GFactualGeocodeCache が使用されます。

省略可能な引数であるcasheにはクライアント側で住所から座標への変換表を作成している場合などに指定します。ここでは取り合えず気にしないで下さい。

実際には次のように記述します。

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);

var geocoder = new GClientGeocoder();

GClientGeocoderクラスのオブジェクトが作成できました。このオブジェクトを通してGoogle側で用意されたサーバに対して問い合わせを行います。

getLatLngメソッド

指定した住所から座標を取得するにはGClientGeocoderクラスで用意されているgetLatLngメソッドを使います。

getLatLng(address:String, callback:function)

指定された住所をジオコード化するために、Google サーバーにリクエストを送
信します。住所が正常に特定できると、GLatLng 地点でユーザーが指定したコー
ルバック関数が起動します。特定できない場合、コールバック関数は null 地点
を取得します。あいまいな住所の場合、最も一致する地点のみがコールバック関
数に渡されます。

1番目の引数に座標を調べたい住所を文字列で指定して下さい。サーバからの応答には時間がかかる場合がありますので、2番目の引数にコールバック関数を指定します。

コールバック関数には呼び出される時にGLatLngクラスのオブジェクトが引数として渡されてきます。このオブジェクトは住所から座標に変換できた場合はその座標が格納されており、変換できなかった場合はnullが格納されています。

実際には次のように記述します。

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.658517, 139.745493), 15);

var geocoder = new GClientGeocoder();
geocoder.getLatLng("東京都千代田区", moveTo);

function moveTo(latlng){
  if (latlng){
    map.setCenter(latlng, 15);
  }else{
    alert("住所から緯度経度に変換できません");
  }
}

上記では"東京都千代田区"に該当する座標を取得し、その座標へ移動します。

getLatLngメソッドでは常に1つの結果を返すことに注意して下さい。指定した住所があいまいで該当する座標が複数あった場合でもその中の一つを返してきます。

サンプルプログラム

では試してみます。

code1_1.js

var map;
var geocoder;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(36.004673,137.351074), 5);

    geocoder = new GClientGeocoder();
  }
}

function moveAddress() {
  var address = document.getElementById("address").value;
  geocoder.getLatLng(address, moveTo);
}

function moveTo(latlng) {
  if (latlng){
    map.setCenter(latlng, 15);

    map.clearOverlays();
    var marker = new GMarker(latlng);
    map.addOverlay(marker);

  }else{
    alert("住所から緯度経度に変換できません");
  }
}

map1_1.html

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>サンプル：住所から座標を取得</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code1_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>

    <form>
    <p>
    <input type="text" id="address" size="30" value="住所を入力" />
    <input type="button" id="addressbtn" value="座標取得" onclick="moveAddress()" />
    </p>
    </form>

  </body>
</html>

ではブラウザで上記のURLを見てみます。

p1-1