Google マップでクリックした場所の住所と緯度・経度と郵便番号を表示するプログラム

あと郵便番号までわかったら最高なんですけどね・・・。

Google マップでクリックした場所の住所と緯度・経度を知る方法 | IDEA*IDEA

という一言に、勝手に触発されて作ってみたのが上のマップ。

Google Maps API から緯度・経度情報を取得して、それを JSONP でグルーブテクノロジーの郵便番号検索 API に送り、返ってきた郵便番号を再び Google Maps API でマップ上に情報を表示する…というのが基本的な処理の流れ。

あとは、オートコンプリートの検索窓を付けたり、マーカー、インフォボックス、メッセージの表示方法を API リファレンスを見ながらちょこちょこ変更。

参考にしたのが、以下のサイト。

• 緯度・経度からを住所取得する
• グルーブテクノロジー株式会社 - Web サービス：郵便番号検索API
• ASCII.jp：手軽になった！Google Maps API V3
• Google Maps JavaScript API v3 Example: Places Autocomplete

で、肝心のコードがこちら。

<input id="searchTextField" type="text" size="50" />
<div id='map' style='width:600px; height:600px;'><br></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type='text/javascript'><!--
var ad = "";
var ll = "";
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 12,
  center: new google.maps.LatLng(35.689479,139.691778),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(mouseEvent) {
  getAddress(mouseEvent.latLng);
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({map: map});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
  var place = autocomplete.getPlace();
  if (place.geometry) {
    if (place.geometry.viewport) {
      infowindow.close();
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
    }
  }
});
function getAddress(latlng) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    latLng: latlng
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[0].geometry) {
        ad = results[0].formatted_address.replace(/^日本, /, '');
        var ad2;
        if (ad.match(/^([^０-９]+)/)) {
          ad2 = RegExp.$1;  
        }
        ll = latlng;
        var s = document.createElement("script");
        s.charset = "utf-8";
        s.src = 'http://api.postalcode.jp/v1/zipsearch?word=' + encodeURIComponent(ad2) + '&callback=showPostalCode';
s.charset = 'utf-8';
        document.body.appendChild(s);
      }
    } else {
      alert(status);
    }
  });
}
function showPostalCode(data) {
  var l = ll.toUrlValue();
  var p = formatCode(data.zipcode.a1.zipcode);
  marker.setPosition(ll);
  infowindow.setContent(((p)? "<span style=\"color:red;\">" + p + "</span><br />": "") + ad + "<br />" + "<a style=\"color:green;\" href=\"https://maps.google.co.jp/maps?q=" + l + "\" target=\"_blank\">" + l + "</a>");
  infowindow.open(map, marker);
}
function formatCode(c) {
  return (c.match(/(\d{3})(\d{4})/))? "〒" + RegExp.$1 + "-" + RegExp.$2: "";
}
//-->
</script>

とりあえず、Firefox と Chrome では動作を確認。IE は知らない。

Google Maps API、初めて触ってみたものの、なかなか手軽で面白い。地図を使ったウェブアプリ、何かアイデアが浮かんだら作ってみてもいいかも…。