각각의 title을 인포윈도우 너비 조정 또는 커스텀 오버레이

지도/로컬 API
#1

안녕하세요.

마커에 info윈도우를 달려고 아래와 같은 함수를 넣었습니다. 이 함수는 drawing manager 에서 받은 데이터의 마커를 표시하는 함수입니다.

// Drawing Manager에서 가져온 데이터 중 마커를 아래 지도에 표시하는 함수입니다

function drawMarker(markers) {
    var len = markers.length, i = 0;

    for (; i < len; i++) {
        var marker = new daum.maps.Marker({
            map: map,
            position: new daum.maps.LatLng(markers[i].y, markers[i].x),
            zIndex: markers[i].zIndex,
            image: new daum.maps.MarkerImage(
                markers[i].icon.src,
                new daum.maps.Size(markers[i].icon.width, markers[i].icon.height),
                {
                    coords:markers[i].icon.width.coords,
                    shape: markers[i].icon.width.shape,
                    //offset: new daum.maps.Point(12, 36),
                    //spriteOrigin: new daum.maps.Point(10, 10),
                    //spriteSize: new daum.maps.Size(644, 946)
                }
            )
        });

        overlays.push(marker);


        // 마우스 오버시 마커에 인포윈도우 생성
        var infowindow = new daum.maps.InfoWindow({
        content : '<div class="rnm_map_info">'+ markers[i].icon.title + '</p>'
        });
        // 마커에 마우스오버시 인포윈도우
        daum.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
        // 마커에 마우스아웃 인포 닫기
        daum.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

    } //for문 끝.

 
    function makeOverListener(map, marker, infowindow) {
        return function() {
        infowindow.open(map, marker);
        };
    }
    function makeOutListener(infowindow) {
        return function() {
            infowindow.close();
        };
    }

}

위와 같이 했더니, 구현은 되지만, 인포윈도우의 너비조절이 안되어, 아래와 같이 커스텀오버레이로 바꿨습니다.

// Drawing Manager에서 가져온 데이터 중 마커를 아래 지도에 표시하는 함수입니다
function drawMarker(markers) {
    var len = markers.length, i = 0;

    for (; i < len; i++) {
        var marker = new daum.maps.Marker({
            map: map,
            position: new daum.maps.LatLng(markers[i].y, markers[i].x),
            zIndex: markers[i].zIndex,
            image: new daum.maps.MarkerImage(
                markers[i].icon.src,
                new daum.maps.Size(markers[i].icon.width, markers[i].icon.height),
                {
                    coords:markers[i].icon.width.coords,
                    shape: markers[i].icon.width.shape,
                    //offset: new daum.maps.Point(12, 36),
                    //spriteOrigin: new daum.maps.Point(10, 10),
                    //spriteSize: new daum.maps.Size(644, 946)
                }
            )
        });

        overlays.push(marker);

        var customOverlay = new daum.maps.CustomOverlay({
        position: new daum.maps.LatLng(markers[i].y, markers[i].x),
        content: '<div class="rnm_map_info">'+ markers[i].icon.title + '</div>'
        });

        daum.maps.event.addListener(marker, 'mouseover', infoOverSet);
        daum.maps.event.addListener(marker, 'mouseout', infoOverClose);


    } //for문 끝.

    function infoOverSet(){
        return function() {
            customOverlay.setMap(map);
        };
    }

    function infoOverClose(){
        return function() {
            customOverlay.setMap(null);
        };
    }


}

위와 같이 하니 안되네요ㅠ

제가 원하는 것은, 모든 마커에 Marker title을 infowindow 와 같은 방법으로 보여주되,

위와 같이 깔끔하게 보여주는 것입니다.

조언을 구합니다.

  1. 인포윈도우의 기본 너비를 좁게 조절하는 방법
  2. 커스텀오버레이를 각 마커에 마우스 오버 이벤트에 구현하는 방법.

감사합니다.

1개의 좋아요
#2

  1. 인포윈도우의 기본 너비는 조절하는 API가 따로 없어서 일정 이하로 조절이 불가능합니다.
    커스텀 오버레이를 사용하는 것이 맞습니다.

  2. 먼저 커스텀 오버레이는 마커와 동일한 좌표값을 가지도록 별도 생성하셔야 합니다.
    그리고
    마커의 mouseover 이벤트에 커스텀 오버레이의 customOverlay.setMap(map); 을 실행시키도록 해 주시고
    머커의 mouseout 이벤트에 커스텀 오버레이의 customOverlay.setMap(null); 을 실행시키도록 해 주시면 됩니다.
    마커와 겹치지 않게 하기 위해서는 xAnchor, yAnchor 값을 조절하시면 됩니다.

텍스트의 길이에 따라 너비가 flexable 하게 조절되도록 만드려면
커스텀 오버레이 내부에 들어가는 content를 구성하실 때,
HTML + CSS을 잘 조합하여 넣어 주시면 됩니다.

실제 본문에 스크린 샷으로 찍어 주신 map.daum.net의 저 툴팁도
따로 기능이 있는게 아니라 CustomOverlay로 만들어진 것입니다.
여러개의 Element들과 이미지, 그리고 CSS 속성들을 사용하여 제작한 것이므로 만드실 수 있을거에요.

1개의 좋아요
#3

:grinning: