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

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

카카오지도 인포윈도우 변경후
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개
좋은자료 감사 감사합니다~~^^*
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2694 | 2개월 전 | 188 | ||
| 2693 | 2개월 전 | 148 | ||
| 2692 | 2개월 전 | 158 | ||
| 2691 | 2개월 전 | 174 | ||
| 2690 | 2개월 전 | 326 | ||
| 2689 | 2개월 전 | 233 | ||
| 2688 |
|
2개월 전 | 441 | |
| 2687 | 2개월 전 | 292 | ||
| 2686 |
선택과집중
|
2개월 전 | 329 | |
| 2685 | 2개월 전 | 291 | ||
| 2684 | 2개월 전 | 346 | ||
| 2683 | 2개월 전 | 481 | ||
| 2682 | 2개월 전 | 276 | ||
| 2681 | 2개월 전 | 302 | ||
| 2680 |
선택과집중
|
2개월 전 | 278 | |
| 2679 | 2개월 전 | 330 | ||
| 2678 |
|
3개월 전 | 429 | |
| 2677 |
|
3개월 전 | 502 | |
| 2676 | 3개월 전 | 326 | ||
| 2675 | 3개월 전 | 304 | ||
| 2674 |
선택과집중
|
3개월 전 | 480 | |
| 2673 |
|
3개월 전 | 322 | |
| 2672 | 3개월 전 | 335 | ||
| 2671 | 3개월 전 | 284 | ||
| 2670 | 3개월 전 | 260 | ||
| 2669 | 3개월 전 | 374 | ||
| 2668 | 3개월 전 | 289 | ||
| 2667 |
선택과집중
|
3개월 전 | 484 | |
| 2666 |
선택과집중
|
3개월 전 | 470 | |
| 2665 |
선택과집중
|
3개월 전 | 404 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기