sample을 보고 db에 저장된 주소 값으로 검색해 지도에 다중마커를 띄우는데는 성공했습니다.
하지만 인포윈도우에 내용이 제대로 들어가지 않네요ㅠㅠ
iwContent에 addr[i] 를 넣으면 지도와 인포윈도우 모두 동작은 하는데 내용이 undefined로 뜨고,
아래 코드처럼 iwContent에 addr[i].branch 를 넣으면 지도도 제대로 뜨지않습니다.
addr[i].branch 를 넣어야 원하는 값을 불러올 수 있을 것 같은데… 불러오지 못하는 이유를 모르겠습니다.
아래는 코드 일부입니다.
<script>
// 주소를 담을 배열
var addr = new Array();
<c:forEach var="dto" items="${list }">
addr.push( {branch : "${dto.st_branch }"},
{address : "${dto.st_addr2 }"
});
</c:forEach>
for (var i = 0; i < addr.length; i++) {
//alert(addr[i].branch);
//alert(address[i].address);
}
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center : new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level : 4 // 지도의 확대 레벨
};
// 지도를 생성
var map = new daum.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성
var geocoder = new daum.maps.services.Geocoder();
for(var i=0; i<addr.length; i++) {
// 주소로 좌표를 검색
geocoder.addressSearch(addr[i].address, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status == daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시
var marker = new daum.maps.Marker({
map : map,
position : coords
});
// 마커에 커서가 오버됐을 때 마커 위에 표시할 인포윈도우를 생성
var iwContent = '<div>' + addr[i].branch + '</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우로 장소에 대한 설명을 표시
var infowindow = new daum.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 지도의 중심을 결과값으로 받은 위치로 이동
map.setCenter(coords);
} // if end
// 마커에 마우스오버 이벤트를 등록
daum.maps.event.addListener(marker, 'mouseover', function() {
// 마커에 마우스오버 이벤트가 발생하면 인포윈도우를 마커위에 표시
infowindow.open(map, this);
});
// 마커에 마우스아웃 이벤트를 등록
daum.maps.event.addListener(marker, 'mouseout', function() {
// 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거
infowindow.close();
});
});
} // for end