다음 지도 api의 마커에 zIndex 적용시켜서 반응형으로 만들기

요즘은 웹 서비스를 만들때 지도가 참 많이 들어간다. 그래서 그런지 구글, 다음, 네이버 각 회사들의 지도 api를 받아서 많이 사용한다.

나의 경우 보통 다음지도 api를 많이 받아서 사용한다. 사용하다 보니 지도상에 마커가 여러개 겹치는 경우가 발생한다. 이럴 경우 다음 api의 docs를 제대로 살펴보지 않은 사람들은 대부분 css설정에서 position을 absolute로 설정을 하고 zIndex값을 리스너를 통해 변경시켜주는 작업을 하게 된다. 하지만 변경 되지 않는다.(내가 했던 뻘짓...) 당연하다. 지도의 경우만 내가 선언한 div내에 위치하게 되고 지도를 구성하는 것들은 다음에서 받아오는 것이기 때문이다.

그렇기 때문에 지도에서 제공해주는 함수를 이용해서 설정을 변경시켜줘야 한다. 

구글에 다음지도 api라고 검색하면 접속하는 링크가 나온다 들어가서 docs를 누르면

아래 사진과 같은 서브메뉴를 볼 수 있다.

이렇게 말이다. 여기서 보면 각각의 기능들에 대한 zIndex설정을 도와주는 함수들이 있다. 

필자의 경우 마커와, 커스텀 오버레이를 사용했기 때문에 2개의 docs를 보고 설정하였다.

자세한 사용법을 보면 아래 사진을 보면 된다.

참고로 우리가 zIndex설정을 하지 않고 마커를 찍어낸다면 각각의 마커에는 기본값의 zIndex값이 있다.

필자가 구현하려 한 것은 마커에 마우스가 올라 갔을때 뒤에 있던 마커를 앞으로 가져오고 마우스가 떠나면 다시 마커가 원상복귀 하는 기능을 구현하려 했기 때문에 이 기능을 기준으로 설명을 하겠다.

우선 setZindex의 경우는 마커의 zIndex를 설정하는 것이다 . zIndex는 값이 클수록 우선 순위가 높기 때문에 주변 마커들 보다 큰 zindex 값을 주면 해당 마커가 가장 위로 올라오게 된다.

getZIndex는 말 그대로 해당 마커의 zIndex 값을 가져오는 것이다. 위 두개의 함수를 이용해서 간단하게 마커를 마우스의 액션에 따라 마커의 위치를 제어해보자.

  var markerZIndex;
  var infoWindowZIndex;
       daum.maps.event.addListener(marker,'mouseover',makeOverListener(map, marker, infoWindow));
       function makeOverListener(map, marker, infoWindow){
           return function(){
               markerZIndex = marker.getZIndex();
               infoWindowZIndex = infoWindow.getZIndex();
               marker.setZIndex(999);
               infoWindow.setZIndex(999);
           };
       }
            
       daum.maps.event.addListener(marker,'mouseout',makeOutListener(map, marker, infoWindow));
       function makeOutListener(map, marker, infoWindow){
           return function(){
               marker.setZIndex(markerZIndex);
               infoWindow.setZIndex(infoWindowZIndex);
           };
       }

마커나 인포 윈도우, 커스텀 오버레이에 리스너를 주는 방법은 3번 라인부터 11번째 라인까지 이다. 클로저를 통해서 각각의 마커와 리스너를 서로다른 주소로 1:1 매칭을 시켰다. 그렇기 때문에 마지막 등록된 값을 따라가는게 아니고 원래 있던 고유의 값을 가지고 있게 된다.

1번과 2번 라인은 해당 마커가 가지고 있던 기본 인덱스 값을 저장하기 위한 변수를 선언한 것이다.

6번과 7번은 마커의 zindex값을 변수에 집어 넣고 해당 마커와 인포 윈도우의 zIndex값을 999로 셋팅해서 마우스가 올라왔을때 주변에 있는

마커들보다 위로 올라오게 설정을 했다.

13번 라인부터는 마우스가 떠나고 나서의 코드이다. 마우스가 떠나면 마커는 다시 원상복귀 되어야 함으로 미리 변수에 저장해 놓은 zindex값을 이용해 다시 마커와 인포 윈도우에 설정을 하고 있는 것이다.

정말 간단하다. api문서를 제대로 확인하지 않고 작업을 하려고 했던 것이 가장 큰 실수였다.

혹시라도 어떠한 api를 사용하는데 막히는게 생긴다면 가장 먼저 api문서를 확인하고 해당 문서내용을 기반으로 검색하라. 그러면 정말 빠르게 답을 찾을 수 있을 것이다.