Home > その他 > 郵便番号 > JavaScript の利用 > HeartRails Geo API を使用( 182 )

HeartRails GeoのAPIを使用して作ってみました。

郵便番号から住所を検索

キーワードから郵便番号を検索

「郵便番号から住所を検索」のコード

1. Script部

<SCRIPT type="text/JavaScript">
function SearchAddress(){	//「住所検索」ボタンが押された時に呼ばれる関数
	var zipcode=document.getElementById("zip").value;
	if( ! CheckZipcode(zipcode)){	//郵便番号のチェック
		alert("[ "+zipcode+" ]は正しくない郵便番号です");
		return ;
	}
	Ctrl_cursor("wait");	//マウスカーソルを待機状態にする
	RemoveScript("//geoapi.heartrails.com/api/json?method=searchByPostal&postal=");
	var target=document.createElement("script");
	target.src = "//geoapi.heartrails.com/api/json?method=searchByPostal&postal="+encodeURIComponent(zipcode)+"&jsonp=GetAddress";	//HeartRails Geo のサイトから住所情報を取得
	document.body.appendChild(target);
}
function CheckZipcode(zipcode){	//郵便番号のチェック
	if(!zipcode) return false;	//郵便番号が入力されていない
	if(!zipcode.match(/^\d{7}$/)){	//入力された郵便番号が７桁であるか
		return false;
	}
	return true;
}
function GetAddress(zip){	//コールバック関数(住所情報の取得)
	Ctrl_cursor("default");	//マウスカーソルを元に戻す
	if(!zip.response.error){
		document.getElementById("pref").value=zip.response.location[0].prefecture;
		document.getElementById("city").value=zip.response.location[0].city;
		document.getElementById("city_kana").value=zip.response.location[0].city_kana;
		document.getElementById("town").value=zip.response.location[0].town;
		document.getElementById("town_kana").value=zip.response.location[0].town_kana;
	}else{
		alert(zip.response.error);
	}
}
function Ctrl_cursor(ctrl){	//マウスカーソルの制御
	document.body.style.cursor = ctrl;
	var tag=Array('input','a','button','select');
	for(var j=0;j<tag.length;j++){
		for (var i = 0; i < document.getElementsByTagName(tag[j]).length; i++) {
			document.getElementsByTagName(tag[j])[i].style.cursor = ctrl;
		}
	}
}
function RemoveScript(url){
	for(var i=document.scripts.length-1;i>=0;i--){
		var p=document.getElementsByTagName('script')[i];
		if(p.getAttribute('src')!=null&&p.getAttribute('src').indexOf(url)==0){
			p.parentNode.removeChild(p);
		}
	}
}
</SCRIPT>



2. Html部

<div style="text-align: left;padding-left:10px;">
<form>
<table>
<tr><th>郵便番号:</th><td><input type="text" id="zip" size="8" maxlength="7"><input type="button" onclick="SearchAddress();return false;" value="住所検索">　※ハイフォンなしで入力してください。</td></tr>
<tr><th>都道府県:</th><td><input type="text" id="pref" size="8"></td></tr>
<tr><th>市区町村:</th><td><input type="text" id="city" size="30"><input type="text" id="city_kana" size="40"></td></tr>
<tr><th>町域:</th><td><input type="text" id="town" size="30"><input type="text" id="town_kana" size="40"></td></tr>
</table>
</form>
</div>

「キーワードから郵便番号を検索」のコード

1. Script部

<SCRIPT type="text/JavaScript">
function SearchZipcode(){	//「郵便番号検索」ボタンが押された時に呼ばれる関数
	var keyword=document.getElementById("keyword").value;
	if( ! CheckKeyword(keyword)){	//キーワードのチェック
		alert("キーワードを入力してください");
		return ;
	}
	Ctrl_cursor("wait");	//マウスカーソルを待機状態にする
	RemoveScript('//geoapi.heartrails.com/api/json?method=suggest&matching=like&keyword=');
	var target=document.createElement("script");
	target.src = "//geoapi.heartrails.com/api/json?method=suggest&matching=like&keyword="+encodeURIComponent(keyword)+"&jsonp=GetZipcode";	//HeartRails Geo のサイトから住所情報を取得
	document.body.appendChild(target);
}
function GetZipcode(data){	//コールバック関数(住所情報の取得)
	Ctrl_cursor("default");	//マウスカーソルを元に戻す
	var ret="";
	ret+='<table class="zipcode"  cellspacing="0" cellpadding="0" border="0" width="100%">';
	ret+='<tr><td align="center" width="30">連番</td><td align="center" width="65">郵便番号</td><td align="center" width="65">都道府県</td><td align="center">住所</td><td align="center" width="60">経度</td><td align="center" width="60">緯度</td></tr>';
	for (var i=0;i<data.response.location.length;i++){
		var adress=data.response.location[i].prefecture+data.response.location[i].city+data.response.location[i].town;
		ret+="<tr><td align=\"center\">"+(i+1)+"</td><td align=\"center\">"+data.response.location[i].postal+"</td><td align=\"center\">"+data.response.location[i].prefecture+"</td><td>"+adress+"</td><td>"+data.response.location[i].x+"</td><td>"+data.response.location[i].y+"</td></tr>";
	}
	ret+="</table>";
	document.getElementById("list").innerHTML=ret;	//画面に表示する
}
function CheckKeyword(key){	//キーワードのチェック
	if(!key) return false;	//キーワードが入力されていない
	return true;
}
</SCRIPT>
<style type="text/css">
table.zipcode td {
	padding:0px 3px;
	border:1px #897858 solid;
}
</style>

2. Html部

<div style="text-align: left;padding-left:10px;">
<form>
<table>
<tr><th>キーワード:</th><td><input type="text" id="keyword" size="20"><input type="button" onclick="SearchZipcode();return false;" value="郵便番号検索">　※無料版なので検索件数は最大100件までです。</td></tr>
</table>
</form>
</div>
<div class="command" id="list" style="white-space: pre;overflow-x: scroll;overflow-y: scroll;"></div>