[010/API] Kakao Map API | 인포윈도우 커스텀하기

1.  문제상황

---

현재 현위치 인포윈도우(말풍선)는 위 사진과 같다. 딱 봐도 예쁘지 않다.ㅋㅋㅋㅋ 그래서 인포윈도우를 커스텀하려고 한다! 

일단 현위치에 마커를 찍는 방법은 아래 포스팅을 참고하자!

2022.04.12 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 현위치 표시하기

(공식문서도 참고!https://apis.map.kakao.com/web/sample/removableCustomOverlay/ )

 

2.  현위치 인포윈도우 꾸미기!

---

//map.html
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
	var imageSize = new kakao.maps.Size(48, 53);
	var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
	var marker = new kakao.maps.Marker({
		map: map,
		position: locPosition, 
		image : markerImage, 
	});

	// 커스텀 오버레이에 표시할 컨텐츠 입니다
	var content = '<div class="wrap">' + 
                '    <div class="info">' +
                '     <div class="info-content">현위치</div>' + 
                '     <div class="close" onclick="closeOverlay()" title="닫기"></div>' + 
                '    </div>' +    
                '</div>';

	// 마커 위에 커스텀오버레이를 표시합니다
	var overlay = new kakao.maps.CustomOverlay({
		content: content,
		map: map,
		position: locPosition  
	});

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

	// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
	function closeOverlay() {
		overlay.setMap(null);     
	}
	
	// 지도 중심좌표를 접속위치로 변경합니다
	map.setCenter(locPosition);   
}

👉🏻나는 현위치의 인포윈도우를 커스텀하기 때문에 displayMarker 함수를 수정했다! 코드를 하나씩 살펴보자!

(displayMarker를 실행하는 함수이자 현위치를 찾는 함수인 currentLocation은 다음 글을 참고하자!)

2022.04.12 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 현위치 표시하기

// 커스텀 오버레이에 표시할 컨텐츠 입니다
var content = '<div class="wrap">' + 
            '    <div class="info">' +
            '     <div class="info-content">현위치</div>' + 
            '     <div class="close" onclick="closeOverlay()" title="닫기"></div>' + 
            '    </div>' +    
            '</div>';

👉🏻먼저 커스텀 오버레이(=인포윈도우)의 내용을 적어준다. html 코드를 적어주면 된다.

// 마커 위에 커스텀오버레이를 표시합니다
var overlay = new kakao.maps.CustomOverlay({
    content: content,
    map: map,
    position: locPosition  
});

👉🏻kakao map API의 CustomOverlay메서드를 이용해 인포윈도우를 띄운다.

• content: 인포윈도우 내용
• map: 인포윈도우를 띄울 지도
• position: 인포윈도우 위치, 여기서 locPosition은 현위치를 불러오는 함수(currentLocation)에서 받아온 현위치이다.

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

// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
function closeOverlay() {
    overlay.setMap(null);     
}

👉🏻마커를 클릭했을 때 인포윈도우를 띄우는 이벤트와 x버튼을 누르면 인포윈도우를 닫는 함수를 정의한다.

.wrap {
    position: absolute;
    left: -3.5rem;
    bottom: 50px;
    width: 120px;
    height: 49px;
    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: 120px;
    height: 37px;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    border: 0;
    box-shadow: 0 1px 2px #888;
}

.info .info-content {
    padding: 5px 0 0 20px;
    height: 37px;
    background: #fff;
    border-bottom: 1px solid #fff;
    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: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')
}

👉🏻CSS파일은 다음과 같다! 이 역시 공식문서에 나와있어서 가져와서 본인의 입맛대로 고치면 될 것 같다ㅎㅎ

변경된 인포윈도우! 말풍선을 조금 귀엽게 만들어보았다ㅎㅎ