etc, javascript : daum map open api 에서 roadview 구현시 주의점.

뭐... 주의점이라고 적어놓았으나.... 포스팅하기도 부끄러운 사례라 저만 간직할까 하지만...
혹여나 같은 일로 고민하고 계시는 분이 계실까 작성합니다.

daum roadview 기본생성하기 튜토리얼같은 것을 보면

function init(){
   var p= new daum.maps.LatLng(37.53729488297613, 127.00551022687515);
   var rc = new daum.maps.RoadviewClient();
   var rv = new daum.maps.Roadview(document.getElementById("roadview"));
   rc.getNearestPanoId(p, 50, function(panoid) {
      rv.setPanoId(panoid, p);
   });
}

위와같이 작성되어있는 것을 확인할 수 있습니다.
이에 따라서 아마....도....
맵을 구현할 시에 마커위에 마우스가 올라가는 이벤트가 발생하면
로드뷰가 보이는 등의 기능을 구현시 위 코드를 메소드로 구현할수도 있겠습니다.
고러믄. 어마어마하게 메모리가 잡혀먹는 것을 볼 수 있습니다.
대여섯번만 로드뷰 실행하면 브라우저가 3D 최신게임 돌리는 메모리를 잡아먹고 있는 것을 확인할 수 있죠.

여기서 문제가 되는 것은 바로 Roadview를 생성하는 코드입니다.
이 두 코드는 메소드 호출될 적마다 바로바로 호출되는데
로드뷰의 그 화려한 기능을 roadview 라는 엘리먼트에 열심히 삽입하는 것입니다.
문제는 그 삽입되는 기능의 코드들은 그 누구도 해제하지 않는 다는 것입니다.

이런 경우를 볼까요?

1, 2, 3이라는 마커가 있습니다.
그럼 각 1, 2, 3은 각 마커는 마우스가 위에 올라올 시에
로드뷰 생성 메소드가 호출되면서 roadview 엘리먼트에 삽입되겠죠...
각 마커에 5번 마우스를 올리면 15개의 파노라마가 roadview 엘리먼트에 삽입되게 되는 것입니다..
확인하기도 전에 아마 브라우저는 뻗겠죠?

그럼 이 문제를 어떻게 해결할까요?
이 말이 나오기도 전에 아마들 깝깝한 쉐리.... 라고 혀를 차실거같지만...ㅠㅠ
바로 메소드 밖에 전역변수든 로컬변수든 어쨌건 메소드 밖에서 roadview 클래스를 생성해줍니다.
그렇게 되면 roadview 엘리먼트를 파라미터로 받는 Roadview 클래스가 1회 생성되고
이는 계속 재활용되면서 좌표에 따른 Roadview만 보여주게 되는 것입니다.

이상 부끄러운 포스팅이었습니다...ㅠㅠ