루미집사

카카오지도 인포윈도우(infoWindow) 커스텀하기

· 2020-08-15 (토) 14:44:01 · 16103 · 6

카카오지도 infoWindow를 커스텀 하는 방법입니다.
물론, 커스텀 오버레이로 활용할 수 있습니다.

 

저 같은 경우에는 커스텀 오버레이를 이미 사용중이고 말풍선 같은 기능이 추가로 필요해서입니다.
카카오지도에서는 infoWindow의 디자인을 지원하지 않기 때문에 아래와 같은 방법으로 쉽게 변경할 수 있습니다.

 

infoWindow를 위, 아래, 좌, 우등 원하는 위치로 변경할 수 있습니다.

 

 

2000880543_1597469999.2463.jpg

카카오지도 인포윈도우 디자인 (기본적으로 디자인 변경 불가)

 

 

 

2000880543_1597470052.5089.jpg

카카오지도 인포윈도우 변경후

 


infoWindow 생성시 아래와 같이 객체를 추가 합니다.
infoWindow 내부에 HTML 코드로 추가해 줍니다. 
[code]
var mLabel = new daum.maps.InfoWindow({
    position:  new daum.maps.LatLng(position.latlng[0], position.latlng[1]),
    content: '<span class="info-title">말풍선타이틀</span>' // 인포윈도우 내부에 들어갈 컨텐츠 입니다.
});
mLabel.open(map, marker); // 지도에 올리면서, 두번째 인자로 들어간 마커 위에 올라가도록 설정합니다.
[/code]

 

 

 

CSS - info-title 설정
[code]
.info-title {
    display: block;
    background: #50627F;
    color: #fff;
    text-align: center;
    height: 24px;
    line-height:22px;
    border-radius:4px;
    padding:0px 10px;
}
[/code]

 

 

 

Javascript - infoWindow  CSS 강제로 변경하기
아래 코드는 지도 DATA를 불러온 이후에 실행되어야 합니다.
(지도에 마커가 모두 표시된 이후...)
[code]
var infoTitle = document.querySelectorAll('.info-title');
infoTitle.forEach(function(e) {
    var w = e.offsetWidth + 10;
    var ml = w/2;
    e.parentElement.style.top = "82px";
    e.parentElement.style.left = "50%";
    e.parentElement.style.marginLeft = -ml+"px";
    e.parentElement.style.width = w+"px";
    e.parentElement.previousSibling.style.display = "none";
    e.parentElement.parentElement.style.border = "0px";
    e.parentElement.parentElement.style.background = "unset";
});
[/code]
 

|

댓글 6개

2020-08-16 (일) 22:33:17
좋은 자료 감사합니다.
2020-08-17 (월) 02:08:31
감사합니다.
감사합니다
좋은자료 감사합니다!
2021-05-13 (목) 20:43:22
추천도장 꾹~ 누르고
좋은자료 감사 감사합니다~~^^*
2021-12-23 (목) 17:47:09
좋은자료 감사합니다!
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
20-08-27 조회 6,214
20-08-26 조회 7,501
20-08-26 조회 6,801
20-08-23 조회 6,350
20-08-17 조회 5,518
20-08-17 조회 6,934
20-08-17 조회 7,357
20-08-15 조회 1.6만
20-08-14 조회 6,770
20-08-13 조회 6,159
20-08-11 조회 6,705
20-08-08 조회 8,369
20-08-07 조회 8,778
20-08-07 조회 6,131
20-08-05 조회 1.3만
20-08-05 조회 6,116
20-08-04 조회 7,097
20-08-04 조회 6,585
20-08-03 조회 7,689
20-08-02 조회 6,786
20-08-02 조회 6,130
20-08-01 조회 9,377
20-07-31 조회 7,912
20-07-28 조회 7,031
20-07-27 조회 6,312
20-07-24 조회 6,053
20-07-21 조회 7,344
20-07-18 조회 8,660
20-07-16 조회 6,814
20-07-15 조회 7,236