読者です 読者をやめる 読者になる 読者になる

GoogleMapを利用してGeocodingやってみた

連続で住所→緯度経度変換

サーバに負荷がかかるので5秒ごとの変換になっています
サンプルはこちら↓
[http://hidenet.ath.cx/map.html]

map.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****Google Maps API Key ****" type="text/javascript" charset="utf-8"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="map.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
<table>
<tr>
	<td>
		<div id="map" style="width:800px;height:700px"></div>
	</td>
	<td>id/住所/名前をタブ区切りで入力<br>
	<textarea id='txa_addr' cols='40' rows='5'></textarea><input type='button' id='cmdADD' value='変換'><br>
	id/経度/緯度/名前をタブ区切りで入力<br>
	<textarea id='txa_csv' cols='40' rows='5'></textarea><input type='button' id='cmdEXE' value='プロット'>
	</td>
</tr>
</table>
<select id='sel_addr'>
<option value='34.701909,135.494977,11'>大阪駅</option>
<option value='41.773709,140.726413,8'>函館駅</option>
<option value='35.423270,133.336570,8'>米子</option>
<option value='34.093255,131.39657,8'>新山口</option>
</select>
  </body>
</html>

map.js

	$(document).ready(function(){
		var setPoint = function(map,point,t){
			var marker;
			if (t!=undefined){
				marker = new GMarker(point,{title:t});
			}else{
				marker = new GMarker(point);
			}
			map.addOverlay(marker);
			return;
		}
		var setCenter = function(map,x,y,zoom){
			map.setCenter(new GLatLng(parseFloat(x), parseFloat(y)), parseInt(zoom));
		}
		var map;
		var _d = document;
		if (GBrowserIsCompatible()) {
			map = new GMap2(_d.getElementById("map"));
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			var wk = _d.getElementById("sel_addr").value.split(/,/);
			setCenter(map,wk[0],wk[1],wk[2]);
			setPoint(map,new GLatLng(parseFloat(wk[0]),parseFloat(wk[1])),"");
		}
		$("#cmdADD").click(function(){
			//緯度経度のデータを基に地図上にマーカーをセットします
			var rows = $("#txa_addr")[0].value.split('\n');
			var idx = 0;
			if (rows.length==0) return;
			map.clearOverlays(); 

			setInterval(function(){
					if	(rows[idx]!=""){
						var cols = rows[idx].split(/\t/);
						setPlacePoint(cols[0],cols[1],cols[2]);
					}
					idx++;
				},
				5000
			);
		});
		var setPlacePoint = function(code,addr,title){
			var geocoder = new GClientGeocoder();
			geocoder.getLatLng(addr, function(point) {
				if (point) {
					map.setCenter(point);       // 移動
					setPoint(map,point,title);
					if (title==undefined ){
						$("#txa_csv")[0].value += "\n"+code + "\t"+point.lat()  +"\t" + point.lng();
					}else{
						$("#txa_csv")[0].value += "\n"+code + "\t"+point.lat()  +"\t" + point.lng() + "\t" + title;
					}
				}
//				 else {
//					alert("見つかりません:" + addr + "\n"+ title);
//				}
			});
		}
		$("#cmdEXE").click(function(){
			//住所を緯度経度に変換します
			var rows = $("#txa_csv")[0].value.split('\n');
			if (rows.length==0) return;
			map.clearOverlays(); 
			for (var i=0;i<rows.length;i++){
				if	(rows[i]!=""){
					var cols = rows[i].split(/\t/);
					setPoint(map,new GLatLng(parseFloat(cols[0]),parseFloat(cols[1])),cols[2]);
				}
			}
		});
		$("#sel_addr").change(function(){
			var wk = _d.getElementById("sel_addr").value.split(/,/);
			map.panTo(new GLatLng(parseFloat(wk[0]), parseFloat(wk[1])));
			map.setZoom(parseInt(wk[2]));
		});
	});
	$(window).unload(function () {GUnload();})