鐃緒申速鐃緒申鐃緒申鐃銃みわ申鐃緒申

ricollab Web Tech Blog ? Blog Archive ? ricollab鐃渋醐申鐃緒申鐃緒申鐃俊ワ申鐃緒申鐃緒申討魍�始わ申鐃殉わ申!
鐃緒申鐃緒申鐃緒申蝓�ricollab鐃塾語源鐃塾逸申弔任鐃緒申鐃瞬リコ鐃緒申鐃緒申棔廚箸鐃緒申討粒鐃銃逸申鐃緒申鐃緒申鐃銃￥申郵鐃緒申鐃瞬号検鐃緒申鐃緒申鐃緒申鐃俊ワ申鐃薯開始わ申鐃殉わ申鐃緒申
鐃緒申 半鐃術随申鐃緒申7鐃緒申鐃緒申
鐃緒申鐃緒申

郵鐃緒申鐃瞬刻申鐃�7鐃緒申鐃緒申鐃熟わ申鐃緒申函鐃緒申弍鐃緒申鐃緒申觸誌申蠅�鐃緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃殉わ申鐃緒申鐃緒申鐃塾ままでよけ鐃緒申鐃�submit鐃緒申鐃緒申鐃緒申鐃叔なわ申鐃緒申鐃緒申鐃縦器申鐃�(鐃緒申鐃夙わ申鐃緒申鐃緒申鐃熟わ申鐃緒申鐃緒申)鐃緒申鐃緒申submit鐃緒申鐃緒申函鐃緒申録泙鐃緒申擇鐃緒申悗鐃緒申泙鐃緒申鐃�

Google Map API鐃盾、jsapi 鐃緒申 geocoder 鐃緒申鐃出縁申鐃緒申鐃銃わ申鐃緒申泙鐃緒申鐃�

鐃緒申鐃緒申覆里鐃�30分鐃叔緒申鐃緒申鐃緒申鐃緒申鐃緒申鐃祝なっわ申鐃緒申鐃緒申鐃緒申蕕随申泙鐃緒申

余鐃縮でわ申鐃緒申鐃緒申Safari 3.1鐃緒申Error Console鐃叔刻申! Firefox鐃緒申蠅�鐃緒申鐃緒こ鐃曙。

HTML

<div style="border:outset 1px;padding:0.5em;">
<table><tbody>
<tr><th>鐃緒申</th><td><input id="zip" type="text" size="7" onkeyup="
    if (this.value.length == 7){
        gmap.zip = this.value;
        zip2address.parse(this.value);
    }
"> 半鐃術随申鐃緒申7鐃緒申鐃緒申</td></tr>
<tr><th>鐃緒申鐃緒申</th><td><input id="address" type="text" size="40">
<input type="submit" onclick="gmap.gotoAddress(
    document.getElementById('address').value,
    document.getElementById('zip').value
)">
</td></tr>
<tr><th></th><td><div id="gmap" style="width:400px;height:400px"></div></td></tr>
</tbody></table>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi?key=API_KEY"></script>

JavaScript

google.load('maps', '2');
var gmap = {};
gmap.gotoAddress = function(address, zip){
    this.geocoder.getLatLng(address, function(point) {
        if (!point) {
            alert(address + " not found");
        } else {
            gmap.point = point;
            gmap.map.setCenter(point, 15);
            var marker = new google.maps.Marker(point);
            gmap.map.addOverlay(marker);
            var html = address;
            if (zip) html = '鐃緒申'+zip.replace(/(\d\d\d)/, '$1-')+'<br>'+html;
            html += '<br>' + '鐃緒申鐃緒申:' + point.y + ' 鐃緒申鐃緒申:' + point.x;
            google.maps.Event.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(html);
             });
            marker.openInfoWindowHtml(html);
        }
    });
};
google.setOnLoadCallback(function(){
    gmap.map = new google.maps.Map2(document.getElementById('gmap'));
    gmap.map.addControl(new GSmallMapControl());
    gmap.map.addControl(new GMapTypeControl());

    gmap.geocoder = new google.maps.ClientGeocoder();
});
window.onunload=function(ev){  GUnload() }

var zip2address = (function(callback){
  this.proxy     = 'http://zip.ricollab.jp/';
  this.callback  = callback || 'jsonp';
  this.parse = function(zip){
    var script = document.createElement('script'); 
    script.id = this.proxy + '/' + zip + '.json?callback=' + this.callback;
    script.charset = 'UTF-8';
    script.src = script.id; 
    document.lastChild.appendChild(script);
  };
  return this;
})();

function jsonp(json){
    var addr = json.address;
    document.getElementById('address').value = 
        addr ? addr.prefecture + addr.city + addr.town : json.description;
};

Enjoy!

Dan the Musher-up