daum 지도 infowindow오류 해결방법

안녕하세요~ 

daum 지도 api를 이용하여 좌표값에 해당하는 marker를 찍고 해당 좌표에 대한 정보를 올리는 infowindow 를 올려 확인해 본 결과, 

마지막 데이터로 들어간 데이터가 모든 marker에 표시가 되는 이슈사항을 발견했을 시 해결방법에 대해 설명해 드리겠습니다.

먼저, 반복문을 돌면서 마커안에 infowindow를 각각 데이터를 생성해주는데, 마커마다 같은 데이터가 표출되는 원인이 무엇일까요?

그 원인은 루프안에서 클로저를 활용했기 때문에 마지막 변환된 데이터가 계속 찍히는 이유이다. 반복문이 종료된 이후에 실행되기 때문인거죠!

var infowindow = new daum.maps.InfoWindow({
    map: map,
    position: new daum.maps.LatLng(33.450701, 126.570667),
    content: 'I am InfoWindow'
});
  

daum api를 보시면 이렇게 나와 있습니다.

여러개 마커와 인포윈도우를 올리기 위해서는 일단 마커와 인포윈도우에 해당하는 데이터를 배열로 선언해준 이후,

        key = msg[i].id;
        keyArray.push(key);
        var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize)
        var positions = new daum.maps.LatLng(msg[i].y,msg[i].x);
        markerArray[key] = new daum.maps.Marker({
            map: map, // 마커를 표시할 지도
            position: positions, // 마커를 표시할 위치
            image : markerImage,  // 마커 이미지 
            clickable: true  // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
         });    
        infoWinArray[key] = new daum.maps.InfoWindow({
            position: positions,
            removable: true,
            zIndex:1
        });    
        markerArray[key].key = key;
        infoWinArray[key].iwContent = iwContent;
        infoWinArray[key].type = msg[i].type;
        daum.maps.event.addListener(map, 'click', function() { //지도 누르면 infowindow 종료
            if(selectedInfo!=null){
                selectedInfo.close();
                selectedInfo = null;
            }    
        });
        daum.maps.event.addListener(markerArray[key], 'click', function(){   // 마커 위에 인포윈도우를 표시합니다
            if(selectedInfo != null){ //그전 infowindow 종료
                selectedInfo.close();
                selectedInfo = null;
            }    
            selectedInfo = infoWinArray[this.key];
            selectedInfo.key = this.key;
            infoWinArray[this.key].setContent(infoWinArray[this.key].iwContent);
            infoWinArray[this.key].open(map,this); 
            var type = infoWinArray[this.key].type;
            getPosition(type,this.key);
        });

position은 infowindow의 자표값이 들어갑니다. zIndex는 인포우윈도우가 마커들이 가까이 찍혔을때 뒤로 가는걸 방지하기 위해서입니다.

infowinArray에 새로운 프로토타입객체를 만들어 저장을 합니다. 프로토타입은 상속개념으로써, 부모객체에 값을 넣기 때문에 데이터가 각각 객체안에 저장이됩니다.

 그렇게 만들어진 infowinArray에서 클릭 이벤트가 발생했을시 selecetedInfo가 있으므로 그전데이터와 지금 켜져있는 infoWindow가 구별이 됩니다. 그리고 현재데이터를 key가 아닌 this.key 지금 마커에 해당하는 데이터로 접근해야만 됩니다. 

따라서 이슈사항을 해결하기 위해 제일 중요한 것은 마지막데이터만 가르키지 않고 클릭한 마커에 해당하는 데이터를 불러올 수 있게 this. 으로 접근해야 합니다. 또한, 다른marker를 클릭하거나 지도를 클릭시 켜지고 있는 infowindow event를 종료하기 위해 selectedInfo로 마지막 infowindow에 대한 정보를 임시로 가지고 있습니다.

꿀팁! sample,guide 보다는 Docs를 보는게 더 필요한 부분을 빨리 찾을 수 있답니다 ^^

참고:http://apis.map.daum.net/web/