HTML5에서 자바스크립트를 연동하여 클릭이벤트 리스너를 사용하여

아래 그림과 같이 빨간 점(marker)를 클릭했을때 박스가 뜨게 하는 맵을 그리고 있는데요

박스를 클릭하기도 전에 저렇게 박스가 전부 다 떠버리네요.


클릭을 하지 않았는데도 함수가 실행되는 이 현상 어떻게 해결해야 될까요?


아래는 클릭리스너를 이용한 드랍박스함수 소스입니다.

for (i = 1; i <= aryData1.length; i += 4){ var lat = aryData1[i]; var lng = aryData1[i + 1]; var pix = aryData1[i - 1]; var arrge = aryData1[i + 2]; var myLatlng = new google.maps.LatLng(lat, lng); if(google.maps.geometry.poly.containsLocation(myLatlng, bermudaRectangle)) { var marker = new google.maps.Marker({ position : myLatlng, pix : pix, arr : arrge, icon : { path : google.maps.SymbolPath.CIRCLE, scale : 1, strokeColor : 'red', }, draggable : true, map : map }); } else { continue; } /* google.maps.event.addListener(marker, 'click', function(event) { clickInfowindow.setContent('<div style="width:auto;height:auto;"> <strong>' + "위도 : " + event.latLng.A + " 경도 : " + event.latLng.F + '</strong>'); clickInfowindow.setPosition(event.latLng); clickInfowindow.open(map); }); */ 


var drawBox = function(e){ var clickInfowindow = new google.maps.InfoWindow();

clickInfowindow.setContent('<div style="width:auto;height:auto;"> <strong>' + "위도 : " + e.position.A + " 경도 : " + e.position.F + "<br>거리 : " + e.arr + " <br>픽셀 : " + e.pix + '</strong>'); 

//clickInfowindow.setPosition(e.position); 

clickInfowindow.open(map,marker); }; 

google.maps.event.addListener(marker, 'click', drawBox(marker)); }; //for 문 end;




drop.png