주소로 검색하여 여러개의 마커를 찍고 마커를 기준으로 맵중심을 이동시키고 싶은데 잘안되네요

    <script>
										var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
											mapOption = { 
												center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
												level: 3 // 지도의 확대 레벨
											};
										// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
										var map = new kakao.maps.Map(mapContainer, mapOption); 
										var positions = [
											{
												category:'1',
												category_name:'법률상담',
												number: '1',
												title: '경남경찰청 성폭력 특수수사대', 
												latlng: '경남 창원시 의창구 상남로 289경남지방경찰청 별관 '
											},
											{	
												category:'1',
												category_name:'법률상담',
												number: '2',
												title: '창원가정상담센터', 
												latlng: '경남 창원시 성산구 창이대로 663번길 7, 대한빌딩 401호(사파동)'
											},
											{
												category:'1',
												category_name:'전문변호',
												number: '3',
												title: '창원성폭력상담소', 
												latlng: '경남 창원시 의창구 신월로 42 토월복합상가 725호'
											},
											{
												category:'1',
												category_name:'전문변호',
												number: '4'	,
												title: '여성긴급전화경남센터',
												latlng: '경남 창원시 의창구 북면 동전로179-18'
											}
										];
										var bounds = new kakao.maps.LatLngBounds();    
										// 주소-좌표 변환 객체를 생성합니다

										for (var i = 0; i < positions.length; i ++) {				
											var geocoder = new kakao.maps.services.Geocoder();
											geocoder.addressSearch(positions[i].latlng, function(result, status) {
												// 정상적으로 검색이 완료됐으면 
												 if (status === kakao.maps.services.Status.OK) {

													var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

													// 결과값으로 받은 위치를 마커로 표시합니다
													var content = '<div class="point point'+positions[i].category+'"> '+										
														'	<div class="number"><span>'+positions[i].number+'</span></div>'+
														'	<div class="info">'+
														'		<h1>'+positions[i].title+'</h1>'+
														'		<span>'+positions[i].category_name+'</span>'+
														'	</div>'+
														'</div>';
														
													var customOverlay = new kakao.maps.CustomOverlay({
														position: coords, // 마커를 표시할 위치
														content: content,
													});
													var point_center ={
														
													};
													map.setCenter(coords);
													customOverlay.setMap(map);
												} 		
												console.log(coords);
											}); 											
										}									
									</script>

이런식으로 작성했는데.

zoqcj

마커별로 숫자가 1,2,3,4 나오는게 아니라 2만 나오고있는 이유가 궁금합니다.

그리고 주소로 검색한 결과로 지도중심을 맞추는방법은 알겠는데.

다수의 마커를 기준으로 중심을 잡을수있는 방법은 무엇인가요??

비동기라서 for 로 돌리시면 아마 i 값이 생각하시는 걸로 안들어갈거예요 ^^;;

중심 잡기는
http://apis.map.kakao.com/web/sample/setBounds/
를 활용하시면 돼요.

for문을 사용하면 i값이 보존되지 않습니다.
forEach으로 수정해주세요.

아래 링크도 참고해주세요.


 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
											mapOption = { 
												center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
												level: 3 // 지도의 확대 레벨
											};
										// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
										var map = new kakao.maps.Map(mapContainer, mapOption); 
										var positions = [
											{
												category:'1',
												category_name:'법률상담',
												number: '1',
												title: '경남경찰청 성폭력 특수수사대', 
												latlng: '경남 창원시 의창구 상남로 289 '
											},
											{	
												category:'2',
												category_name:'법률상담',
												number: '2',
												title: '창원가정상담센터', 
												latlng: '경남 창원시 성산구 창이대로 663번길 7'
											},
											{
												category:'3',
												category_name:'전문변호',
												number: '3',
												title: '창원성폭력상담소', 
												latlng: '경남 창원시 의창구 신월로 42 토월복합상가 725호'
											},
											{
												category:'4',
												category_name:'전문변호',
												number: '4'	,
												title: '여성긴급전화경남센터',
												latlng: '경남 창원시 의창구 북면 동전로179-18'
											}
										];  
										// 주소-좌표 변환 객체를 생성합니다.
									
										positions.forEach(function(v,i){
											var geocoder = new kakao.maps.services.Geocoder();
											var bounds = new kakao.maps.LatLngBounds();
											geocoder.addressSearch(positions[i].latlng, function(result, status) {
												// 정상적으로 검색이 완료됐으면 
												 if (status === kakao.maps.services.Status.OK) {	
													var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

													// 결과값으로 받은 위치를 마커로 표시합니다
													var content = '<div class="point point'+positions[i].category+'"> '+										
														'	<div class="number"><span>'+positions[i].number+'</span></div>'+
														'	<div class="info">'+
														'		<h1>'+positions[i].title+'</h1>'+
														'		<span>'+positions[i].category_name+'</span>'+
														'	</div>'+
														'</div>';
														
													var customOverlay = new kakao.maps.CustomOverlay({
														position: coords, // 마커를 표시할 위치
														content: content,
													});
													customOverlay.setMap(map);
													map.setCenter(coords);
												} 		
											}); 		
											
										});

주소로 검색하여 다수의 마커 생성은 성공했습니다만…

마커를 이용하여 지도의 중심을 잡아야 하는데. 주소로 검색하여 받은 좌표를 다시 배열에 담아서 처리해야 하나요?

네 검색할 때 받은 좌표를 배열로 따로 관리해서 setBounds를 해주세요.
예제는 위에 setBounds 링크 참고해주세요.

다시 질문 드려 죄송합니다.

배열에 담을때 어떤 형태로 담아야하나요…

  1. 33.452278, 126.567803
  2. new kakao.maps.LatLng(33.452278, 126.567803)

음… 위에 있는 setBounds 예제 링크 들어가 보셨나요?
그곳에 질문 주신 답이 있습니다.
아래 코드 참고해주세요.

// 버튼을 클릭하면 아래 배열의 좌표들이 모두 보이게 지도 범위를 재설정합니다 
var points = [
    new kakao.maps.LatLng(33.452278, 126.567803),
    new kakao.maps.LatLng(33.452671, 126.574792),
    new kakao.maps.LatLng(33.451744, 126.572441)
];