벌써 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
| 첨부 파일 | 파일 크기 |
|---|---|
| gmap_ex3.html | 1.66 KB |


댓글 쓰기