GoogleMapを使ってみるその2

去年、某会社でネタで作ったGoogleMapを使ったものを家で再現してみました。
久しぶりにJavaScript使った。
しかし、初心者レベル一歩先くらい進歩したかなと自画自賛してみる。

紙芝居はこちら。

右側のxxkmの距離を選択後、地図上をクリックするとその大きさの円が描写されます。
勿論、地図の縮尺・拡大をしてもちゃんとしております。
で、ポインタをクリックすると誰かさんの情報が表示されまする。

構成はJava, iBatis, Spring。
サーバはtomcat5、DBはMySQLでございます。
iBatisは初めて触りました。
Springは仕事でもいじったことありましたが、ほんのさわり程度しか使う機会がなかったので
使ってみました。

個人的にはiBatisのほうがhibernateより好きかなという印象を持ちました。
ORマッピングは良いのかもしれませんが、アノテーションがどうも好きになれない。
というか、やり過ぎでソースの可読性が落ちているような。。

新参者にとってはフレームワークもあんましな〜という気分です。
プログラムを楽しむというより、使い方を覚えさせられるっていう感じでどうも取っつきにくい。

さてと、、

htmlのコードであります。

<body onload="load()" onunload="GUnload()">
 	<div id="mapcontents">
	    <div id="map"></div>
	    <br>
	    <div id="dist">
	    	<select name="test" onchange="setradius(this);">
	    		<option label="5km" value="0.1">100m</option>
	    		<option label="5km" value="0.5">500m</option>
	    		<option label="5km" value="1">1km</option>
	    		<option label="5km" value="5">5km</option>
	    		<option label="15km" value="15">15km</option>
	    		<option label="30km" value="30">30km</option>
	    		<option label="50km" value="50">50km</option>
	    	</select>
	    </div>
		<div id="sbox" >
			<form action="#" onsubmit="mapsearch(this.address.value);return false;" >
				<p>
				<input type="text" name="address" value="" size="30"></input>
				<input type="submit" value="検索"></input>
				<input type="button" value="自宅" onclick="mapsearch('XJapan')"></input>
				</p>
			</form>
		</div>
		<div id="sidebar1"></div>
		<div id="sidebars">
			<div id="sidebar2"></div>
		</div>
	</div>
</body>

javaScriptのソースコードであります。

var map;
var geoserch = new GClientGeocoder();

//g
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);

	
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.658517, 139.701334), 10);
      }
      GEvent.addListener(map,"click", function(overlay, latlng) { 
	  if (latlng) { 
		    //var myHtml = "The GPoint value is: " + map.getCenter().toString();
		    //map.openInfoWindow(latlng, myHtml);
		    viewCircle(latlng.latRadians(),latlng.lngRadians(),radi.getRadius());
		  }
		});

    	map.disableDoubleClickZoom();
		map.addMapType(G_PHYSICAL_MAP);
		map.enableScrollWheelZoom();
		map.addControl(new GMenuMapTypeControl());
		map.addControl(new GLargeMapControl());
		map.addControl(new GOverviewMapControl(false));
		
		
		//var urls="sample.json";
		var urls="sample/sample.do";
		HTTP.getJSON(urls,decoemp);

    }

	//g
	function mapsearch(address) {
		geoserch.getLatLng(address, function(point){
			if (!point) {
		        alert(address + " not found");
		      } else {
		        map.setCenter(point, 10);
		        var marker = new GMarker(point);
		        map.addOverlay(marker);
		        marker.openInfoWindowHtml(address + point.toString());
		      }
		});
	}

	
	function decoemp(data) {
		var jdata = eval("("+data+")");
		clearOverlay();//map上から削除
		overlays = null;
		empdata(jdata);
			
	}
	
	//g
	var overlays = null;//map上のマーカ

	//data処理
	function empdata(data) {
		if(overlays == null) {
			overlays = new Array();
		}
		var posarray = data.employees;
		for(var i=0;i" +
				  "所属 : " + postsection + "
" + 
				  "氏名 : " + emp.name + "
" + 
				  "\"某犬\"" ;
		
		var tabinf = new GInfoWindowTab("社員情報",str);
		return tabinf;
	}


	//sub
	var randumIcolor={};
	(function() {
		var count=0;
		var array = ["_yellow","_black", "_white", "_green"];
		var getColor = function() {
			if(count > 3) count=0;
			var cor = array[count];
			count++;
			return cor;
		}
		randumIcolor.getColor = getColor;
	})();

	//sub
	var radi={};
	(function() {
		var radius=5;
		var getRadius=function() {
			return radius;
		};
		var setRadius=function(rad) {
			radius=rad;
		};
		radi.getRadius=getRadius;
		radi.setRadius=setRadius;
	})();

	
	function setradius(selnode) {
		radi.setRadius(selnode.options[selnode.selectedIndex].value);
	}


	//g
	function viewCircle(latr,lngr,rad) {
		al.PolygonCircle.removePolygon(map);
		al.PolygonCircle.createPolygonCircle(latr,lngr,rad);
		al.PolygonCircle.addPolygon(map);
	}




var HTTP={};
HTTP._factories = [
		function() {return new XMLHttpRequest();},
		function() {return new ActiveXObject("Msxml2.XMLHTTP");},
		function() {return new ActiveXObject("Microsoft.XMLHTTP");}
]
HTTP._factory=null;
HTTP.newRequest = function() {
	if(HTTP._factory != null) {
		return HTTP._factory();
	}
	for(var i=0;i



prototype.jsは使っておりません。
本当はリファクタリングすれば見やすくなりますが。

もっと情報処理の基本レベルを学びたいと思う今日この頃でした。
頑張るぞ！
最近公開されたGoogle Developer Day 2009の動画を見るとマジで震えてくる。
技術を極めるとこういうことが出来るんだというお手本を見せられているようで尊敬です。

http://www.youtube.com/watch?v=HNVhc6OwNoc