현재 내 주변에서 가까운 매장 출력하기

<%@ include file="/WEB-INF/views/include/footer.jsp"%>

현재 내 위치에서 가까운 매장을 마커에 찍고싶은데
우선 지도에 현재 내위치까지 찍었는데
ajax로 디비에 저장된 매장좌표가 안불러와지는데
ajax 코드가 이상한건가요…?

안녕하세요~

첨부하신 코드는 ajax코드가 아니라 include코드라 확인할 수가 없네요.

지도에 여러개 마커를 표시하는 예제는 아래 주소를 참고 해주세요~
https://apis.map.kakao.com/web/sample/multipleMarkerImage/

소스를 전체적으로 식별하기가 어려운데요.
아래 부분이 좌표 목록을 받아오는 부분이라면, 데이터를 받아와서 처리하는 부분이 없네요.

$.ajax({
		url : 'http://localhost:8080/tumbler/tumlist1',
		type : 'GET',
		dataType:"json",
		success : function(data){
			console.log(data);
			alert(data);
			alert(JSON.stringify(data));
			
			var positions=[];
			
			$.each(data, function(index, item){
				
				for(var i =0; i< data.lenght; i++){
					alert(i);
				
					
				   });
			})
			
		},

		error : function(e){
			console.log("에러발생!! : ", e);
		}
	});

서버에서 내려주는 데이터를 가져오지 못한다면
url경로가 맞는지 서버에서 데이터를 반환시켜주는지 확인해주세요.

var positions = []; //마커 좌표를 담을 배열

	$.ajax({
		type:"GET",
		url:"http://localhost:8080/tumbler/tumlist1/map",
		data:{
			cafe_idx:"${cafe.cafe_idx}",
			cafe_name:"${cafe.cafe_name}",
			cafe_lat:"${cafe.cafe_lat}",
			cafe_lon:"${cafe.cafe_lon}",
			location:"${cafe.location}"
		
		},
	error : function(error) {
		console.log("error");
	},
	success : function(positions) {
		console.log(positions);
		//alert(data);
		alert(JSON.stringify(positions));
	    console.log(positions[0].cafe_name, positions[0].cafe_lat);
		console.log("success");
		
		for (i = 0; i < positions.length; i++) {
			 
			positions.push({ 
		         content : positions[i].cafe_name, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
		         latlng: new kakao.mapsLatLng(positions[i].cafe_lat, positions[i].cafe_lon)
		         
		    
		    });
			
			 marker.setMap(map);
			    
			    // LatLngBounds 객체에 좌표를 추가합니다
			 bounds.extend(positions[i]);
		}


	},
	async: false
	
	});

답변 감사합니다! 좌표 불러왔는데 이번엔 마커 찍으려니까 마커가 안 찍어지는데 for문이 잘못된걸까요??

var positions = []; //마커 좌표를 담을 배열

	$.ajax({
		type:"GET",
		url:"http://localhost:8080/tumbler/tumlist1/map",
		data:{
			cafe_idx:"${cafe.cafe_idx}",
			cafe_name:"${cafe.cafe_name}",
			cafe_lat:"${cafe.cafe_lat}",
			cafe_lon:"${cafe.cafe_lon}",
			location:"${cafe.location}"
		
		},
	error : function(error) {
		console.log("error");
	},
	success : function(positions) {
		console.log(positions);
		//alert(data);
		alert(JSON.stringify(positions));
	    console.log(positions[0].cafe_name, positions[0].cafe_lat);
		console.log("success");
		
		for (i = 0; i < positions.length; i++) {
			 
			positions.push({ 
		         content : positions[i].cafe_name, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
		         latlng: new kakao.mapsLatLng(positions[i].cafe_lat, positions[i].cafe_lon)
		         
		    
		    });
			
			 marker.setMap(map);
			    
			    // LatLngBounds 객체에 좌표를 추가합니다
			 bounds.extend(positions[i]);
		}


	},
	async: false
	
	});

넵 url 변경했더니 좌표 등 정보데이터 가져왔는데
for문을 이용해서 마커 찍으려고 하는데 안되네요 ㅠ… 여기서 marker을 추가 하면 될까요…?

아래 게시글 답변 참고해서 LatLng 객체 생성 수정해주세요.

마커 생성이 완료되지 않아 SyntaxError가 발생했습니다.
아래와 같이 수정해주세요.

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    map: map, // 마커를 표시할 지도
    position: latlng // 마커를 표시할 위치
});  // 이 부분이 누락되어 있습니다.

그리고… 이전 글과 동일하게 콘솔 오류 로그를 확인하면 해결 가능한 문제입니다.
먼저 오류 내용을 확인해서 로직에 문제가 없는지 확인해주세요.

인포윈도우의 title 속성은 내용이 아닙니다.
content 속성을 지정하셔야 합니다.

https://apis.map.kakao.com/web/documentation/#InfoWindow

11111
tumlist1:452 Uncaught ReferenceError: customOverlay is not defined
at HTMLButtonElement.closeBtn.onclick

이렇게만 뜹니다…

예제는 참고용일 뿐이며 응용은 개발자의 몫입니다.
로직 설계 미스로 인한 원치 않는 동작에 대해서는 저희가 코드를 제공해 드리지는 않습니다.

말씀하신 내용은 지도 API로 충분히 구현 가능하니
코드를 차근히 작성 및 디버깅 해 나가다 보면 구현하실 수 있으실 겁니다.