카카오맵 커스텀 오버레이 CSS 관련

카카오맵이 조아

개인적으로 지도를 사용해야하는 상황에서 네이버가 제공하는 API 보다는 카카오에서 제공하는 카카오맵을 더 선호하는 편이다. 주관적인 이유지만, 카카오쪽이 API에 대한 설명이나, 예제 등 사용법을 가르쳐주는 과정에서 더 친절하다는 느낌을 받기 때문이다.

하지만 쓰다보면 확실히 제한적이라는 생각이 든다... 지극히 개인적이고 주관적이고, 또한 내가 실력이 부족해서일지도 모르겠으나, 큰 맥락에서의 가이드 라인을 제시하고 그것을 벗어나서 개인적으로 조작하기에 다소 까다로운 면이 있다.

조곰 불편해

특히나 내가 개인적으로 이것저것 디자인을 넣고자 할때, 또 거기에 부수적인 기능을 추가하려고 할때 제한적이다라는 생각을 하게되는데, 예를들어 마커의 경우 지정한 이미지로 마커의 디자인을 변경할 수는 있지만 세부적으로 크기나 위치를 조정하기에는 다소 불편함을 느낀다.

또한 인포윈도우의 경우에도 내가 원하는 디자인으로 css를 수정하다가 복창을 터트린적이 한두번이 아니다.

또한 함수의 경우도 마찬가지다. 이들이 만들어놓은 메소드 외에 다른 방식으로 조작하려 들면 영문 모를 온갖 버그를 마주하게 된다.

그래서 커스텀오버레이

위와 같은 이유로 커스텀 오버레이를 통해 구현하는 것을 선호하는데, 말그대로 내가 커스텀해서 오버레이를 지도에 올릴 수 있기 때문에, 내 맘대로 제어하기가 좋다.
하지만 이마저도 여의치는 않다. 기본적인 css(디자인, 폰트 크기 등등)은 내가 원하는대로 제어할 수 있지만, 다이나믹하게 구현하려 들면
도대체가 말을 들어 먹질 않는다. 그래서 한가지 꼼수를 공개하고자 한다.

꼼수

https://apis.map.kakao.com/web/sample/customOverlay1/
우선 위의 링크처럼 카카오에서 제공하는 방법대로 오버레이를 생성한다.
이때 content에 class나 id를 지정해줄 수 있는데, 이를 이용한 꼼수이다.

/* 예시 코드 */

var content = '<div id="controlCustomOverlay"><img src = "test.com/test.img"></div>'
var customOverlay = new kakao.maps.CustomOverlay({
    map: map,
    position: position,
    content: content
}); // 일단 이렇게 생성을 해준 뒤

// content 상위 div 찾기
var contentUpperSection = $('#controlCustomOverlay').parent('div');

간단하다. 위의 예시 코드처럼 content에 id나 class를 부여해서 지도에 올린 뒤, 속성이나 아이디로 요소를 찾아 바로 상위 div를 지정해주면 된다. 이를 활용한 예제를 올려보겠다.

예제)

• 내가 만든 커스텀오버레이에 호버시 z-index를 조절해 우선적으로 선택 가능하게 해보자

var content = '<div class="controlOverlay"><img src = "test.com/test.img"></div>'

var customOverlay = new kakao.maps.CustomOverlay({
    map: map,
    position: position,
    content: content
}); // 커스텀 오버레이 생성

$('.controlOverlay').mouseover(function(){
	$(this).parent('div').css('z-index', '100');
});
$('.controlOverlay').mouseleave(function(){
	$(this).parent('div').css('z-index', '1');
});

위와 같이 구현하게 되면 호버시 해당 요소가 가장 앞에 노출되고 커서가 다른곳으로 이동하면 다시 다른 일반요소와 같은 z-index로 변경된다.

이렇게 하면 이벤트에 따라 사라지게 하거나 이동시키거나 하는 등 다양한 방면으로 활용할 수 있다.

어케했누

이게 별거냐고 생각하는 분들이 있을수도 있겠지만(많겠지만), 토이프로젝트나 학교 및 학원에서 과제용 플젝을 하는 사람들은 하루 웬종일 이것때문에 골머리를 썩힐수도 있다. (내가 예전에 이걸로 시간을 겁나 잡아먹었다.)

html을 찬찬히 뜯어보면 map에 해당하는 영역이 있고 또 하나하나 뭐가 뭔지 찾다보면 정체모를 div들이 상당히 많다. 게중에는 우리가 만든 마커나, 오버레이 같은 요소들이 있는데 자세히 안보면 뭐가 뭔지 잘 모른다. 왜냐하면 우리가 만든 친구들이 상위 div로 감싸져 있기 때문이다.

자세히 보면 우리가 만든 content 들을 이 영역안에 담아 지정한 좌표위에 얹는데, 이 녀석들에 감싸져 있기 때문에 그 안에 있는 content 관련 요소들을 조작해도 잘 먹히지 않는 것이다.

때문에 이 상위 div 친구들을 잘 활용하면 카카오맵 고객센터에 일일이 질문하고, 수많은 예제들을 훑어보지 않아도, 웬만한 것들은 구현이 가능하다.