(5) 카카오 지도 API - 커스텀 정보창 표시하기

본 포스팅에서는 카카오 지도 API에서 표시되는 정보창의 커스터마이징 방법에 대해 알아보도록 하겠습니다. 일반적인 정보창(infowindow)와 커스텀 오버레이(CustomOverlay)의 라이브러리 변수는 다음과 같습니다.

카카오 지도 API 정보창

var infowindow = new kakao.maps.InfoWindow({
     content: positions[i].content // 인포윈도우에 표시할 내용
});

카카오 지도 API 정보창 커스텀 오버레이

var infowindow = new kakao.maps.InfoWindow({
     content: positions[i].content // 인포윈도우에 표시할 내용
});

위의 스크립트에서 확인가능한 것처럼 애초에 사용되는 라이브러리가 다릅니다.

둘의 가장 큰 차이는 정보창의 테두리에 border-radius CSS가 적용이 되느냐 마느냐 입니다. 먼저 카카오 지도 API의 커스텀 오버레이 실행결과와 스크립트를 확인해 주시기 바랍니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>닫기가 가능한 커스텀 오버레이</title>
    <style>
    .wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}
    .wrap * {padding: 0;margin: 0;}
    .wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
    .wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
    .info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
    .info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
    .info .close:hover {cursor: pointer;}
    .info .body {position: relative;overflow: hidden;}
    .info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
    .desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
    .info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
    .info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
    .info .link {color: #5085BB;}
</style>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
    mapOption = { 
        center: new kakao.maps.LatLng(37.5546788, 126.9706069), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    }; 

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 지도에 마커를 표시합니다 
var marker = new kakao.maps.Marker({
    map: map, 
    position: new kakao.maps.LatLng(37.5546788, 126.9706069)
});

// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다 
var content = '<div class="wrap">' + 
            '    <div class="info">' + 
            '        <div class="title">' + 
            '            서울역' + 
            '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + 
            '        </div>' + 
            '        <div class="body">' + 
            '            <div class="img">' +
            '                <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
            '           </div>' + 
            '            <div class="desc">' + 
            '                <div class="ellipsis">서울특별시 용산구 동자동 43-205</div>' + 
            '                <div class="jibun ellipsis"> 서울역은 서울특별시 용산구와 중구에 </div>' + 
            '                <div class="jibun ellipsis"> 위치한 민자역사 철도역이다. </div>' + 
            '            </div>' + 
            '        </div>' + 
            '    </div>' +    
            '</div>';

// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
    content: content,
    map: map,
    position: marker.getPosition()       
});

// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
    overlay.setMap(map);
});
    
// 맵을 클릭했을 때 커스텀 오버레이를 닫습니다.
kakao.maps.event.addListener(map, 'click', function() {
    overlay.setMap(null);
});

</script>
</body>
</html>

어떠신가요? 기존의 카카오 지도 API와 차이점이 보이시나요?

좀 더 확대를 해서 카카오 지도 API(Infowindow), 카카오 지도 API(CustomOverlay) 그리고 너무나 유명한 에어비엔비의 구글 지도 API의 커스텀 정보창을 비교해보도록 하겠습니다.

카카오 지도 API(Infowindow), 카카오 지도 API(CustomOverlay) 그리고 에어비엔비의 구글 지도 API 커스텀 정보창

보시면 테두리에 border-radius CSS 기능을 통해 라운드가 들어가 있는 것을 확인할 수 있는데요 카카오 지도 API의 기본 infowindow에서는 똑같은 CSS를 사용해도 해당기능이 적용되지 않습니다.

이유는 라이브러리 자체의 div 레이아웃 기능지원 유무로 추정되는데요. 이와 같이 정보창의 CSS 커스텀 자유도를 높이기 위해서는 카카오 지도 API의 경우 커스텀 오버레이를 활용해야 하고 구글 지도 API의 경우 깃헙이나 개발자들이 배포하는 전용 라이브러리를 설치해야 합니다.

해당 기능을 활용하면 자신의 스타일에 맞는 정보창을 구현해 볼 수 있으니 적극 활용해보시기 바랍니다.

2022.12.17 - [정보기술] - (6) 카카오 지도 API - 주소 검색하고 목록으로 나타내기

(6) 카카오 지도 API - 주소 검색하고 목록으로 나타내기

2022.12.17 - [정보기술] - (1) 카카오 지도 API - 지도 만들기 2022.12.17 - [정보기술] - (2) 카카오 지도 API - 단일 마커 표시하기 2022.12.17 - [정보기술] - (3) 카카오 지도 API - 다중 마커 표시하기 2022.12.17 - [

iftraveler.tistory.com

'정보기술' 카테고리의 다른 글

(7) 카카오 지도 API - 특정 주소의 좌표 확인하기 (0)	2022.12.17
(6) 카카오 지도 API - 주소 검색하고 목록으로 나타내기 (0)	2022.12.17
(4) 카카오 지도 API - 정보창 표시하기 (0)	2022.12.17
(3) 카카오 지도 API - 다중 마커 표시하기 (0)	2022.12.17
(2) 카카오 지도 API - 단일 마커 표시하기 (0)	2022.12.17

당신과 나의 어바웃 라이프

(5) 카카오 지도 API - 커스텀 정보창 표시하기

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

(5) 카카오 지도 API - 커스텀 정보창 표시하기

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바