벌써 4번째 강좌가 되었네요. 현재 사이트의 디자인을 계속 변경 중이라서 기존에 강좌를 보시던 분이라면 가볍게 새로고침(F5) 한번 눌러주세요. 혹시나 반영이 안되어있을 수도 있으니까요^^ 그럼 강좌 시작합니다.
----
예제보기

1. 지도에 콘트롤 추가하기

기본적으로 구글맵에서 제공하는 콘트롤은 다음과 같습니다.
- GLargeMapControl, GSmallMapControl, GSmallZoomControl : 지도의 위치와 줌레벨을 조절함. 기본으로 좌측 상단에 생성됨.
- GScaleControl : 축적을 표시, 기본으로 우측 하단에 생성됨
- GMapTypeControl : 지도, 위성사진, 하이브리드를 선택, 기본으로 우측 상단에 생성.
- GOverviewMapControl : 더 넓은 지역을 보여주고 지도 위치 조절 가능. 기본으로 우측 하단에 생성.
예제에 모두 포함시켜두었으니 확인해보시기 바랍니다.

  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());

-addControl함수로 생성된 콘트롤을 지도에 추가합니다.

2. 콘트롤 위치 수정하기

콘트롤의 기본 위치를 수정할 수 있습니다. 기본 위치를 수정해서 GLargeMapControl, GSmallMapControl, GSmallZoomControl 를 겹침 없이 표시해보도록 하겠습니다.

  var topLeft1 = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(80, 10));
  map.addControl(new GSmallMapControl(), topLeft1)

-GControlPosition에서 첫번째 인자는 기준 위치로 G_ANCHOR_TOP_RIGHT, G_ANCHOR_TOP_LEFT, G_ANCHOR_BOTTOM_RIGHT, G_ANCHOR_BOTTOM_LEFT 네 모서리를 넣을 수 있습니다. 두번째 인자는 모서리로부터 떨어진 정도를 나타냅니다.

3. 커스텀 맵 콘트롤

예제보기 여기서는 구글맵의 기본 예제를 기준으로 강좌를 작성합니다.

-커스텀 맵 콘트롤을 생성하기 위해서는 반드시 해야할 4가지가 있습니다.

(1)GControl 을 서브클래싱 합니다.

TextualZoomControl.prototype = new GControl();

(2)initialize() 함수와 (3)getDefaultPosition() 함수를 구현합니다.

//initialize
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");
  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  container.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });
  ...

  map.getContainer().appendChild(container);

  return container;
}

- initialize함수는 DOM element를 리턴합니다. (4)initialize함수에서 map의 container에 추가합니다.

//getDefaultPosition
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

- getDefaultPosition함수는 GControlPosition 오브젝트를 리턴합니다.

참고사이트
- http://www.google.com/apis/maps/documentation/controls.html