2012-05-26

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


あと郵便番号までわかったら最高なんですけどね・・・。
という一言に、勝手に触発されて作ってみたのが上のマップ。

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

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

参考にしたのが、以下のサイト。
で、肝心のコードがこちら。
<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(/^([^0-9]+)/)) {
          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、初めて触ってみたものの、なかなか手軽で面白い。地図を使ったウェブアプリ、何かアイデアが浮かんだら作ってみてもいいかも…。

7 comments:

  1. Stay up the good work! You know, many people are looking round for this info, you could aid them greatly. 토토사이트

    ReplyDelete
  2. back every day. It’s great to have a place like this. I’ll come often. Great work! 온라인카지노

    ReplyDelete
  3. Thanks on your marveous posting! dependably manufacture astonishing entities
    Please always write good comments 경마

    ReplyDelete
  4. You did a brilliant Job! I could have never come up with something like this like I even had to get dissertation help and it took me a lot of tries to get it right. I am fascinated that such determined people like you exist sir. I hope this idea of yours prosper and have a great day!

    ReplyDelete
  5. Thank you for posting such a great article! I found your website perfect for my needs. It contains wonderful and helpful posts. Keep up the good work!. 카지노사이트

    ReplyDelete
  6. Your blog gave us significant data to work with. Each and each tip of your post are amazing. You're the best for sharing. 바카라사이트

    ReplyDelete
  7. Just desire to say your article is as surprising. The clearness in your post is simply great and i can assume you are an expert on this subject. 카지노사이트존

    ReplyDelete