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、初めて触ってみたものの、なかなか手軽で面白い。地図を使ったウェブアプリ、何かアイデアが浮かんだら作ってみてもいいかも…。
スポンサードリンク:

お願い:
「このエントリ役に立った!」と思ったら、ぜひ フィード 登録をお願いします。 

17 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. I have been reading your blog posts for month and its been the greatest thing I am doing in past few months. keep up the good work for sharing the information. 토토사이트

    ReplyDelete
  5. 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
  6. 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
  7. 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
  8. 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
  9. I am sure this piece of writing has touched all the internet visitors, its really really pleasant post on building up new webpage. great blog article.Really looking forward to read more. 카지노사이트

    ReplyDelete
  10. I really enjoy your web’s topic. Very creative and friendly for users. Definitely bookmark this and follow it everyday.
    바카라사이트

    ReplyDelete
  11. We are really grateful for your blog post for giving a lot of information
    토토사이트

    ReplyDelete
  12. I don’t know how many hours I’ve been searching for a simple article like this. Thanks to your writing, I am very happy to complete the process now. Feel free to visit my website; 야설

    ReplyDelete
  13. All the best blogs that is very useful for keeping me share the ideas of the future as well this is really what I was looking for, and I am very happy to come here. Thank you very much Feel free to visit my website;
    한국야동

    ReplyDelete
  14. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. Feel free to visit my website; 국산야동

    ReplyDelete
  15. I have read your excellent post. This is a great job. I have enjoyed reading your post first time. I want to say thanks for this post. Thank you… Feel free to visit my website;
    일본야동

    ReplyDelete
  16. This is one very interesting post. I like the way you write and I will bookmark your blog to my favorites. Feel free to visit my website;
    일본야동

    ReplyDelete

Zenback - Everyone's Related Posts