매쉬업 캠프 Daum 지도 API 퀴즈(1) @ Daum DevDay 2009

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

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

그 문제를 간단히 말하면,

. 야후 GeoCode를 이용해서 지역명을 검색하면 관련 지역 목록이 나오고,
. 원하는 지역을 선택하면 지도에 표시하는 문제입니다.

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

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

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

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

서울시 강남구 역삼동
서울시 강남구 서초동
서울시 강남구 삼성동
서울시 강남구 압구정동

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

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

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

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

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

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