각각의 다른 주소로 여러개의 지도 만들기

각각의 다른 주소를 사용하여 여러개의 지도를 만들려고 하는데

http://ljytest.dgweb.kr/BOARD/TESTB

들어가서 보시면 아시겠지만

각각의 지도가 노출되어지지 않고

마지막 주소만 정상적으로 노출되어지고 있습니다

지도API 스크립트 를 for문으로 감쌌는데 도대체 어느 부분이 에러인지 감을 못잡겠네요ㅠ

도움요청드립니다.

window.onload = function() {   
	<?
		if(sizeof($mapData)){//$mapData 는 지도의정보가 들어있는 배열 ex)주소1,주소2...
			$i=0;// 반복문
			foreach($mapData as $list){//반복문
	?>	
		var mapContainer = document.getElementById('map_<?=$i;?>'), // 지도를 표시할 div 
			mapOption = {
				center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
				level: 3 // 지도의 확대 레벨
			};  

		// 지도를 생성합니다    
		var map = new daum.maps.Map(mapContainer, mapOption); 

		// 주소-좌표 변환 객체를 생성합니다
		var geocoder = new daum.maps.services.Geocoder();

		// 주소로 좌표를 검색합니다
		geocoder.addressSearch("<?=$list['addr']?>", function(result, status) {

//PHP 변수 안에 들어있는 실 주소 ex) 서울특별시 중구 쌍림동…
// 정상적으로 검색이 완료됐으면
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 infowindow = new daum.maps.InfoWindow({
					content: '<div style="width:150px;text-align:center;padding:6px 0;">#####</div>'
				});
				infowindow.open(map, marker);

				// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
				map.setCenter(coords);
			}
			
		});

	<? 
				$i++;//반복문 증가
			}
		}
	?>
}; 

도움 부탁드립니다.

자바스크립트의 특성에 기인합니다.

https://devtalk.kakao.com/t/polyline/37291/4?u=doji.doo

이 질문과 유사하기에 기존 답변으로 대신합니다.

감사합니다!!!
for 문이 아닌 each 문을 사용하니 정상적으로 작동하네요!

한 수 배워갑니다!

1개의 좋아요