벌써 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 |


0
points
안녕하세요 강의 잘 보고 잘 적용했습니다.
그런데 익스플로우 버전에 따라서 보이거나 보이지 않는 경우도 있나요?
600
points
지원브라우저는 다음과 같습니다.
http://local.google.com/support/bin/answer.py?answer=16532&topic=1499
0
points
Referring to this good post but that’s, as well, reasonable to buy the Ed Hardy Ed Hardy Shoes Ed Hardy clothes Cheap Ed HardyThe legal dissertation can be required by different people if include the stuff about this topic. I do know the that’s executable to determine the Ed Hardy Womens Jeans Ed Hardy Womens Knits Ed Hardy Womens Swimwear Ed Hardy Womens T-Shirts Ed Hardy Bags Ed Hardy Belts Ed Hardy Caps Abercrombie Fitch
댓글 쓰기