아..두번째 강의를 올린지 벌써 1주일이 지나버렸군요...
사이에 이것저것 일들이 좀 있어서...잠시 외도를 했습니다만...
주된 원인은 역시 게으름이 문제죠...
그럼 오늘은 "창 열기"와 "맵 오버레이"를 공부해봅시다.
------------------------------------------------------------------
#3 "창 열기"와 "맵 오버레이"
1. "창 열기"
여러분은 housingmaps.com과 같은 사이트에서 구글맵에 말풍선이 달려있고 여러가지 정보를 나타내는 걸 보신 적이 있으실 겁니다. 그걸 구글 맵에서는 창이라고 부르는데, 여기서는 그 창을 열어서 정보를 써 넣는 함수인 openInfoWindow()를 배워봅시다.
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
map.openInfoWindow(map.getCenterLatLng(), document.createTextNode("Hello, world"));
예 그럼 예제를 살펴보죠. 일단 처음 두줄은 #1을 참조하시면 쉽게 이해하실테고, 두번째인 openInfoWindow를 살펴 봅시다. openInfoWindow는 일단 인자로 표시하고 싶은 위치와 말풍선에 표시할 액션을 가지는데, 사용법은 map.openInfoWindow(위치, 액션); 식으로 사용하시면 됩니다. document.createTextNode는 자바스클립의 매서드이므로 생략하겠습니다. 너무 간단하군요. 이리 쓰기도 참 민망합니다.
예시를 누르시면 어떤걸 만들었는지 볼 수 있습니다.
2. "맵 오버레이"
이번에는 맵 오버레이를 배워보죠. 맵 오버레이는 구글 맵상의 한 점에 표시를 하거나, 줄을 긋는 작업들을 일괄해서 말합니다. 예상하셨듯 소스도 길테고 설명도 길어질 겁니다. 함께 힘내서 견뎌내 보죠.
// Center the map on Palo Alto.
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
// Add 10 random markers in the map viewport using the default icon.
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
var point = new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random());
var marker = new GMarker(point);
map.addOverlay(marker);
}
// Add a polyline with 4 random points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random()));
}
points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points));
일단 우리는 이 예제에서 GMarker(),GPolyline()매서드와 addOverlay()매서드에 집중해야합니다. 다른 부분은 길게만 써 있을뿐 별거 없죠. 읽어보시면 간파하실수 있을겁니다. 그럼 간단하게 저 두가지만 설명해드리죠. 일단 GMarker() 매서드는 맵상의 한 GPoint에 표시를 하기 위한 Maker를 만드는 겁니다. housingmaps.com같은 곳에 보면 도시들이 이렇게 표시가 되어있죠. 이 함수의 경우에는 당연히! GPoint를 인자로 가지는데 앞(#1,#2)의 내용을 살펴보시면 GPoint를 어떻게 만드는지 보실수 있을 겁니다. 물론, 위의 예제에도 있습니다. 이렇게 만든 Maker를 우리는 addOverlay()함수를 통해서 맵에 올려주면 됩니다. addOverlay()함수는 이름 그대로죠. 그냥 올려둘 뿐입니다.
다음으로 저 아래쪽의 코드를 보면 GPolyline()매서드를 찾으실 수 있습니다. 위에서 배운 GMaker()가 한점을 표시하는데 사용되었다면, GPolyline()매서드는 맵상에 줄을 긋기 위해서 사용되는 줄을 만드는데 사용됩니다. 만든 줄을 아시다시피 addOverlay()를 사용해서 보여주면 되겠죠. 우선 GPolyline()매서드는 인자로 GPoint들의 배열을 가지는데 이 GPoint들의 배열을 연달아 이음으로써 선을 만듭니다.
예시를 누르시면 어떤걸 만들었는지 볼 수 있습니다.
