사용자가 직접 만든 컨트롤을 등록하는 방법입니다.
예제보기
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
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();
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
});
map.getContainer().appendChild(container);
return container;
}
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "2px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "6em";
button.style.cursor = "pointer";
}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
map.addControl(new TextualZoomControl());
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
소스가 좀 길긴 한데, initialize 함수부터 차근차근 따라가 보면 그리 어렵지도 않습니다.
그 중에서도 아래 부분만 눈여겨 보시면 됩니다.
map.addControl(new TextualZoomControl());
TextualZoomcontrol 함수는 가장 위에 선언되어 있습니다.
TextualZoomControl.prototype = new GControl() 로 GControl의 객체를 생성합니다.
TextualZoomControl.prototype.initialize 에서는 컨테이너를 생성한 후, 텍스트 형태의 컨트롤을 컨테이너에 등록 하고, 다시 이 컨테이너를 map의 컨테이너에 등록시켜 줍니다.
TextualZoomControl.prototype.getDefaultPosition 으로 추가할 컨트롤의 위치를 정하고,
TextualZoomControl.prototype.setButtonStyle_ 로 버튼의 스타일을 지정합니다.
잘 응용하면 다른 컨트롤들도 내 입맛에 맞게 바꿀 수 있겠네요.
자바스크립트를 거의 모르는 저도 대충 이해가 되는 코드이니 왠만하면 다 이해되시리라 생각합니다.
출처 : http://code.google.com/intl/ko/apis/maps/documentation/examples
예제보기
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
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();
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
});
map.getContainer().appendChild(container);
return container;
}
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "2px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "6em";
button.style.cursor = "pointer";
}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
map.addControl(new TextualZoomControl());
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
소스가 좀 길긴 한데, initialize 함수부터 차근차근 따라가 보면 그리 어렵지도 않습니다.
그 중에서도 아래 부분만 눈여겨 보시면 됩니다.
map.addControl(new TextualZoomControl());
TextualZoomcontrol 함수는 가장 위에 선언되어 있습니다.
TextualZoomControl.prototype = new GControl() 로 GControl의 객체를 생성합니다.
TextualZoomControl.prototype.initialize 에서는 컨테이너를 생성한 후, 텍스트 형태의 컨트롤을 컨테이너에 등록 하고, 다시 이 컨테이너를 map의 컨테이너에 등록시켜 줍니다.
TextualZoomControl.prototype.getDefaultPosition 으로 추가할 컨트롤의 위치를 정하고,
TextualZoomControl.prototype.setButtonStyle_ 로 버튼의 스타일을 지정합니다.
잘 응용하면 다른 컨트롤들도 내 입맛에 맞게 바꿀 수 있겠네요.
자바스크립트를 거의 모르는 저도 대충 이해가 되는 코드이니 왠만하면 다 이해되시리라 생각합니다.
출처 : http://code.google.com/intl/ko/apis/maps/documentation/examples
