hampom TODAY

今後また使うかもしれないので、メモメモ。

google Maps API(v3)では APIキーが不要なので、テスト環境でのテストや本番に移行した際にAPIキーを取り直したりといったようなわずらわしさが無いのでお気に入りです(ただのものぐさです…)

サンプルを設置しました！ → SAMPLE

早速、まずは javascript の読み込みを設定します！

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=ja' charset='UTF-8'></script>

次に、住所を入力するinputフィールドと地図を表示するための HTML を用意しました。

<label class='label'>住所</label>
<input type='text' name='address' id='address' value='' />

<label class='label'>地図表示位置</label>
緯度: <input type='text' name='lat' id='lat' value='35.6585873' />
経度: <input type='text' name='lng' id='lng' value='139.7454247' />

<button id='getad'>住所から取得</button>

<div id='map_canvas'></div>

住所を adress のボックスに入力し「住所から取得」をクリックすると、マップの中心とマーカーが住所で入力された位置に移動し、緯度および軽度のボックスに入力されるものです。

$(document).ready(function() {
  var mapdiv = document.getElementById('map_canvas');
  var geocoder = new google.maps.Geocoder();
  var org_lat = $('#lat').val();
  var org_lng = $('#lng').val();

  var point = new google.maps.LatLng(org_lat, org_lng);
  var myOptions = {
      zoom: 16,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scaleControl: true
  };

  var map = new google.maps.Map(mapdiv, myOptions);
  var marker = new google.maps.Marker({
      position: point,
      map: map,
      draggable: true
  });

  google.maps.event.addListener(marker, 'dragend', function() {
      var p = marker.position;
      $('#lat').val(p.lat());
      $('#lng').val(p.lng());
  });

  $('#getad').click(function() {

    var sad = $('#address').val();
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({ 'address': sad}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);
        marker.setPosition(results[0].geometry.location);

        var p = marker.position;
        $('#lat').val(p.lat());
        $('#lng').val(p.lng());
      } else {
        alert('住所から場所を特定できませんでした。最初にビル名などを省略し、番地までの検索などでお試しください。');
      }
    });

    return false;

  });
});

javascript の 2行目から26行目までは、ページを開いた際に表示する地図の設定です。

4行目と5行目で、HTMLにあらかじめ記述されている緯度経度(この例では東京タワーです)を読み込み、10行目で地図の中央に設定。さらに、マーカーを作成し17行目で位置に設定させています。
19行目では、地図上でマーカーをドラッグ＆ドロップできるように設定し、22行目から26行目でドラッグ＆ドロップが行われた場合にドロップ先の緯度経度を HTMLの緯度、軽度のinputボックスに上書きしています。

これは、住所から検索される位置が思った通りの位置になってくれない場合があり(ほら、ビルの名前をマーカーで隠して欲しくない、とか)微調整を行うことが出来るような措置です。

そして28行目から49行目にて「住所から取得」ボタンをクリックした際の処理が書かれています。

AjaxZip 2.0 を使って、郵便番号から住所を取得し、住所から地図。さらに、地図の位置から 駅データさんの「座標から最寄駅 API」を使うとアクセス情報の必要なデータは全てそろってしまうのではないでしょうか。