住所を使って緯度経度を取得する(2)

(注意!)この記事は、旧APIであるGoogle Maps API version 2を解説したものです。version 2の利用は推奨されていないので、意図的に旧バージョンの情報を探していない場合は、新しいバージョンの解説をご覧下さい。


Google Maps APIには住所情報から緯度と経度を取得するGClientGeocoderというAPIがあります。 「住所を使って緯度経度を取得する(1)」では、発見した座標を表示していませんでした。 今回のサンプルは、発見した座標もInfoWindowで表示するようにしました。

住所を入力して移動する

以下のサンプルはGoogle MAPS APIを使ったページのソースです。 強調してある部分が前回のサンプルと違う箇所です。 下記サンプルを試すには「key=aaaaa」の「aaaaa」部分をご利用のAPI key文字列に変更してください。


<!DOCTYPE html PUBLIC "-//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>
    <title>Google Maps JavaScript API Example - simple</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
        type="text/javascript" charset="utf-8"></script>
  </head>
  <body onload="load()">
    <div id="map" style="width:450px; height:400px"></div>
    <script type="text/javascript">
    //<![CDATA[


    var map = null;
    var geocoder = null;

    // 初期化
    // <body onload="load()"> で呼び出されています
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.67431, 139.69082), 13);

        // GClientGeocoderを初期化
        geocoder = new GClientGeocoder();
      }
    }

    // 「移動する」ボタンを押されると実行されます
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address +
                         "<br>(lat=" + point.lat() +
                         ", lng=" + point.lng() + ")");
            }
          }
        );
      }
    }

    //]]>
    </script>

    <form action="#"
          onsubmit="showAddress(this.address.value); return false">
      <P>
        <input type="text" size="40"
                name="address" value="渋谷区1-1" />
        <input type="submit" value="移動する" />
      </P>
      <div id="map" style="width:500px; height:600px"></div>
    </form>

  </body>

</html>

上記サンプルでは、緯度経度情報を使ってマーカを地図に追加するとともに、openInfoWindowHtmlを使って住所情報文字列と座標情報を表示しています。 上記サンプルでは、文字列の取得方法としてFORMを使っていますが、いきなりgetLatLngに「渋谷区1-1」という文字列を入れても同様に動作します。

表示例

表示例です。