우리 기쁨을 나눠요^^

매쉬업 캠프의 지도 API 3번째 문제는 이벤트만 제대로 이용하면 쉽게 풀 수 있는 문제가 나와서 의외였습니다.

간단히 말하면, 다음 지도에서 조정하는데로 따라 움직이는 야후의 위성지도라 할까요?

그림으로 보면 다음과 같습니다.


조건:


위 두 조건을 맞추려면, 한 쪽 기능 다 끄고, 좌표만 맞춰주고 축척만 맞춰주면 됩니다.
실제로 서비스하기엔 딜레이가 심해서 힘들지만 재미있는 예제입니다.

* 처음에 지도가 잘 안 나와서 왜 그런가 했더니, utf-8로 맞춰줘야 하더군요. 너무 간단한 거라서 잠시 당황했습니다 ㅡ.ㅡ

매쉬업 캠프 가기 전 돌발 퀴즈가 나온다고 하기에 문제 내면 손들고 빨리 맞히는 건가 했는데,
문제 내주면 누가 먼저 프로그래밍하냐는 것이었습니다 ^^;

문제는 3문제 나왔지만, 첫번째 문제는 예제 수준이고
두번째 문제는 Daum DNA 사이트 잘 둘러봤으면 크게 어렵지 않은 수준의 문제가 나왔습니다.

그 문제를 간단히 말하면,



지도로 메쉬업을 하려고 하는 사람이면 한 번쯤 생각해 봤음직한 기본적인 문제이고,
중간에 힌트로 콜백함수를 이용하면 간단히 풀 수 있다고 해서, Open API에 올라와 있는 json 예제를 간단히 고치기 시작했습니다.

너무 똑같이 하면 재미없으니까, 약간 바꾼 초기 화면은 다음과 같습니다.


사진에서 보듯이 검색창에 지역을 입력하면, 관련 주소를 보여줍니다.

원래 문제에서는 '강남구'라고 입력하면,



위와 같이 나오게 하라고 했는데, 위와 같이 나오는 것은 주소를 어떻게 보여주냐의 차이일 뿐입니다.
(주소 결과값에 도시, 구, 동 단위까지는 따라오니까요.)


문제에는 조건은 없지만, 주소만 보고 고르는 것보단 대략의 위치도 알면 고르기 편할 것 같아서
찾은 결과 위치를 지도 상에 다 표시하고 적절한 배율로 보이게 했습니다.

여기서 해당 주소를 클릭하면, 그 쪽으로 이동하고 확대되게 만들었습니다.


거기가 아닌 것 같아서(?) 다른 곳도 찍어봤습니다 ^^;


연습 삼아 간단하게 만들었지만, 지도는 사용자가 편하게 사용하게 하려면 고려해야 할 것이 무척 많다는 것을 다시 한 번 생각하게 하는 시간이었습니다.

현재는 지도 Open API 중에는 야후가 다양하면서도 편리한 기능을 공개하고 있어서 사용하기 편했는데, Daum의 새로운 기능과 계획들을 듣고 보니 앞으로 Daum 지도를 이용한 흥미로운 매쉬업이 얼마나 많이 생길까 기대하게 됩니다.