강남역 근처의 스타벅스는 어디?

Google Maps API 기반의 웹지도에 관해 나름 정리하고 있는데 그 제작 방법과 관련된 내용들을 앞으로 블로그를 통해 소개해 볼까 합니다.


DragZoom + Marker Manager = Cluster Zoom! 라는 Google Maps API 사이트 내용을 서울에 맞게 바꾸어서 제작을 해 보았습니다. 아래 그림처럼 결과가 나옵니다. 그림 클릭하시면 새 창에서 지도를 보실 수 있을 겁니다.

새창에서 띠운 지도를 위 그림처럼 볼 수 있는 방법과 그 기법이 핵심입니다. 우선 마우스를 통해 지도상에 드래그앤드랍을 통해서 지도의 줌인과 줌아웃이 가능하게 할 수 있다는 것이 첫번째구요. 두번째는 Marker manager를 통한 다수 지점들의 처리 방법입니다.

우리나라 스타벅스 홈페이지에 가보시면 서울시에만 213개의 스타벅스가 있다고 소개되어 있습니다. 이 모두를 지도에 표시하면 소축적 지도로 볼 경우 너무나 다닥다닥 붙어 있어 구분하기가 어렵습니다. 이럴 경우 강남구에 속한 모든 가게를 하나의 마커로, 서초구, 송파구 각각을 하나의 마커로 표시한 다음 각 구에 해당하는 마커를 클릭했을 시 지도를 확대시켜 보여주면서 선택한 구에 포함되어 있는 스타벅스만 표시할 수 있습니다. 이러한 방법을 쓰는 근본적인 이유는 가시성을 높이기 위해서이기도 하지만 너무나 많은 마커를 지도에 표현할 시 퍼포먼스가 하락되는 것이 가장 큰 이유입니다.

위 이미지 클릭하면 나타나는 새창의 지도에서 왼쪽 상단의 버튼을 클릭하고 서울 강남 부근을 마우스 드래그하여 확대시키면 하나의 마커가 나타날 겁니다. 그 마커를 클릭하면 위 이미지와 같은 지도를 볼 수 있구요...여기서 각 스타벅스 상점의 위치를 확인 가능합니다. 각각의 마커를 클릭하면 스타벅스 무슨 지점인지 확인할 수 있습니다.

스타벅스에서는 이러한 지도 서비스를 콩나물의 MapID 서비스를 이용해서 제공하고 있는데 이게 공짜도 아닐 뿐더라 사용자에게 ActiveX 설치도 강요합니다. 구글맵을 이용하면 공짜로 할 수 있구요 미국의 경우 경로 정보까지 제공할 수 있습니다. 그래서 미국이나 유럽 몇 국가에서는 이미 구글맵 기반으로 스타벅스 위치 정보를 제공하고 있기도 하구요.

아무튼지 이러한 방식으로 사용될 수 있음을 직접 확인해 보시기 바랍니다.