커스텀 오버레이 생성시 content 움직임

지도/로컬 API
#1

커스텀 오버레이를 통해 다음 지도에 이미지 마커를 생성 하였습니다.

화면에 조회되는 데이터 값 만큼 왼쪽에는 리스트 형태로 데이터가 나오고
오른쪽 지도에 반복문을 돌며 커스텀 오버레이 생성으로 이미지 마커가 찍히는데 종종 다른 포지션에 찍혔다가
이벤트를 주면 제 자리로 돌아가는 현상이 발생합니다.

잘못 된 위치에 표시
capture1

원래 위치 표시
capture2

var customOverlay = new daum.maps.CustomOverlay({
position: position,
content: normalImage,
xAnchor: 0.6, // 커스텀 오버레이의 x축 위치, 1에 가까울수록 왼쪽에 위치
yAnchor: 1.0 // 커스텀 오버레이의 y축 위치, 1에 가까울수록 위쪽에 위치
});

소스 중 xAnchor, yAnchor 의 기본값 (0.5,0.5) 일때 위치로 갔다가 설정한 0.6, 1.0으로 돌아오는 것 같은데
확실한 원인을 찾지 못하였습니다.

커스텀 오버레이 생성 시 잘 못 된 위치에 content 생기는 현상은 어떻게 해결해야하나요?

#2

크기가 제대로 잡히지 않은 상태에서 넣어준 content는 API 내부에서 그 크기를 계산하는 과정에서 문제가 생길 수 있습니다.
내부 컨텐츠의 크기를 미리 알고 있다면,
차라리 내부 컨텐츠의 엘리먼트에 width, height 스타일을 미리 먹여서 적용해보세요.
아니면 content로 사용할 이미지를 미리 로딩한 이후에 CustomOverlay를 만들어야 할거에요.

제 생각에는 box model에서 하위모델의 size가 잡히기 전, 즉 img 태그의 이미지가 로딩이 끝나지 않은 상태에서 넣었기 때문에 width=0 height=0 인 content가 들어왔다고 판단하고 계산되었을 거고, 그래서 위치가 어긋난 것 같습니다.
나중에 이벤트를 걸었을 경우에는 그 content가 제대로 size가 지정된 상태이므로 재계산하는 과정에서 제대로 자리를 잡는 것 같네요.

커스텀 오버레이 관련 질문좀 드리겠습니다
#3

빠른 답변 감사합니다.

가이드 주신대로 내부 컨텐츠에 스타일을 미리 적용 하니 움직이는 현상 해결 됐습니다.

다시 한번 감사합니다~