커스텀 오버레이 생성이 안 됩니다

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

1번 .

const displayInfowindow = (marker: any, title: string, click: boolean) => {
        let content = 
            `<div style="padding: 10px; z-index: 1; font-size: 15px; font-weight: bold;">
            ${title}
            </div>`; 
        let newInfowindow = new kakao.maps.CustomOverlay({ 
            position: new kakao.maps.LatLng(marker.n.La, marker.n.Ma),
            zIndex: 9999,
        });
        newInfowindow.setContent(content);
        newInfowindow.setMap(map);
        // 클릭 이벤트에 따라 인포윈도우를 닫는 동작을 설정
        if (click) {
            // 클릭 이벤트가 발생하면 5초 후에 인포윈도우를 닫음
            setTimeout(() => {
                newInfowindow.setMap(null);
            }, 5000);
        } else {
            // 마우스가 마커에서 벗어났을 때 인포윈도우를 닫음
            kakao.maps.event.addListener(marker, 'mouseout', function() {
                newInfowindow.setMap(null);
            });
        }
    };

2번 .

const displayInfowindow = (marker: any, title: string, click: boolean) => {
        let content = 
            `<div style="padding: 10px; z-index: 1; font-size: 15px; font-weight: bold;">
            ${title}
            </div>`;
        let newInfowindow = new kakao.maps.InfoWindow({ 
            zIndex: 1,
            removeable: true,
        });
        newInfowindow?.setContent(content);
        newInfowindow?.open(map, marker);
        console.log(newInfowindow.getMap());
    
        // 클릭 이벤트에 따라 인포윈도우를 닫는 동작을 설정
        if (click) {
            // 클릭 이벤트가 발생하면 5초 후에 인포윈도우를 닫음
            setTimeout(() => {
                newInfowindow.close();
            }, 5000);
        } else {
            // 마우스가 마커에서 벗어났을 때 인포윈도우를 닫음
            kakao.maps.event.addListener(marker, 'mouseout', function() {
                newInfowindow.close();
            });
        }
    }

같은 상황에서 (2번)인포윈도우를 생성이 되고, (1번)커스텀 오버레이는 생성되지 않습니다. 콘솔로그로 찍어보니 커스텀오버레이 객체는 생성되는 것 같은데, setMap에서 맵에 표시되지 않는 것 같습니다.
인포윈도우를 사용하는 다른 함수도 사용하고 있는데, 1번 함수를 실행해보았을 때는 다른 함수에서의 인포윈도우도 생성되지 않고 있습니다. 2번을 실행했을 때는 모두 정상작동합니다.

인포윈도우는 기본적으로 카카오맵에서 창을 제공해주고 그 안에서만 css 가 적용되는 것 같아서 커스텀 오버레이를 사용하려 합니다. 인포윈도우 창 자체의 스타일을 바꿀 수 있다면 그 방법도 알려주시면 감사하겠습니다.

2

인포윈도우는 기본으로 제공하는 인포윈도우 div안에 content가 들어가고 스타일이 불가하며
커스텀 오버레이는 사용자가 설정한 오버레이 스타일 그대로 지도에 올라가는 차이가 있습니다.

커스텀 오버레이 생성 예제에서

var content = '<div style="padding: 10px; z-index: 1; font-size: 15px; font-weight: bold;">카카오</div>';

위 content를 설정하면 지도에 표시가 되는걸로 보아
개발 환경에서 커스텀 오버레이가 보이지 않는다면 프로젝트에 선언된 다른 css가 영향을 주고 있을 수도 있을 것 같습니다.
개발자 도구를 확인하셔서 커스텀오버레이 스타일에 충돌된 스타일이 있는지 확인 부탁드립니다.

그리고 좌표값은 marker.n.La, marker.n.Ma처럼 객체에 직접 접근해서 사용하지 마시고
LatLng 객체의 API로 사용 부탁드립니다.

let lat = marker.getPosition().getLat();
let lng = marker.getPosition().getLng(); 
let position = new kakao.maps.LatLng(lat, lng);
3

감사합니다. 클래스 지정하고 style 파일에 선택자 사용해서 background-color를 지정했더니 표시가 되네요.

1개의 좋아요