저번예제에 이어 이번 예제도 너~~무 간단하다.
좌표가 궁금하다면, 한번 따라해보자.
http://home.megapass.net/~l5027309/eventlistener.html
소스를 보자.
<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&v=2&key=ABQIAAAAEMxD5KuM40jmb4GJnPTkJRS7xOUxO1Ufu-uozDqsHa5hmERu-xQqyZ1M1nyRpJvaLV__GNN29EB0hQ"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); document.getElementById("message").innerHTML = center.toString();});
이부분을 제외하고는 전 예제와 동일하다.
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); document.getElementById("message").innerHTML = center.toString();});
따로 떼어네어서 살펴보자.
구글 API Reference 에 보면, GEvent 는 namespace 로 지정되며, 이벤트헨들러를 등록할수있다. custom event와 DOM event 두 이벤트 등록가능하며, custom event 를 헤제시킬수있다.
addListener 메소드는 addListener(source, event,handler)로 구성되며, GEventListener 클래스를 리턴한다. addListener 은 소스객체에서 발생하는 커스텀이벤트의 이벤트헨들러를 등록시킨다.
map에서 moveend 가 되면, 함수가 실행된다.
center 이라는 변수에 중심좌표를 넣고, message 라는 id를 가진 tag에 innerhtml로 좌표를 써 넣게 된다