이번 강좌에서는 Event 사용에 대해서 알아보도록 하겠습니다. 마우스 클릭, 드래그, 키보드 입력이 있을때 Event가 발생하고, 구글맵에서는 이런 이벤트에 대한 처리를 하는 API를 제시해주고 있습니다.

예제보기

1. 현재 지도의 가운데 위도, 경도 표시하기. 마우스 드래그후에 변경된 위도와 경도를 표시하기

//가운데 위도,경도 표시 
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenter();
  document.getElementById("position").innerHTML = center.toString();
});

- GEvent.addListener(source, event, handler)를 통해서 "moveend" 이벤트가 발생했을때 실행시켜줄 함수를 등록합니다.
- moveend가 발생했을 때 현재 지도의 가운데 위치를 <div id="position"> 에 표시합니다.

2. 마커에 클릭시 인포윈도우 표시하기.

function createMarker(point, html) {
  var marker = new GMarker(point); 
  gmarkers[i++] = marker;
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

- 여러개의 마커를 만들기 위해서 마커 생성 부분을 createMarker 함수로 만들었습니다.
- GEvent.addListner로 marker에 "click" 이벤트가 일어날 경우 openInfoWindowHtml을 실행시킵니다.
- 예제에서는 '서울', '도쿄', '상하이' 세개를 생성해서 각각의 클릭시에 인포윈도우가 표시되도록 하였습니다.

3. 링크와 연동하기

function linkClick(i) {
  //이벤트 생성
  GEvent.trigger(gmarkers[i], "click");
}

- GEvent.trigger로 코드에서 직접 event "click"이벤트를 생성시켜주었습니다.

<a href="javascript:linkClick(0)">서울</a>

- 서울에 자바스크립트가 실행되도록 링크시켜놓는다면, '서울'을 클릭했을 때 지도에서 마커를 클릭한 것과 같은 효과를 보여줍니다.

세번째 강좌는 여기서 마치겠습니다. 잘못된 부분이나 이해가 안가시는 부분이 있으면 댓글로 달아주세요.

참고사이트
http://www.google.com/apis/maps/documentation/events.html
http://www.google.com/apis/maps/documentation/reference.html#GEvent