포트폴리오용 으로 어플 하나만들고싶어서 문의 드립니다. mysqlDB에 주소가 저장되어있는데 이걸 ajax을 사용하여 가져와서 지도에 검색을하면서 마커를 생성해주고싶은데 어떻게 사용을 해야될까요 ?? 가능한가요? 가능 하다면 어떤 예제를 참고해서 만드는게 좋을지 전혀 감이 안잡혀서 이렇게 문의를 드립니다!
지금 따라하고있는데 자꾸 이런 오류가 나네요. 이유를 전혀모르겠는데 제가 뭘 잘못하고있는건가요??
콘솔이랑 다찍어봤는데 다 정상적으로 찍히는데 지도만 들어가면 접근이 안되는것같아요.
$(document).ready(function(){
$.ajax({
type: ‘POST’,
url: ‘${pageContext.request.contextPath}/fran/rest/getFranInfo’,
dataType: ‘json’,
success: function(result) {
var positions = result;
console.log(positions);
console.log(positions[1].franName);
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var bounds = new kakao.maps.LatLngBounds();
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
var geocoder = new kakao.maps.services.Geocoder();
for (var i = 0; i < positions.length; i ++) {
geocoder.addressSearch(positions[i].franAddress, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.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;">' + positions[i].franAddress + '</div>',
disableAutoPan: true
});
infowindow.open(map, marker);
}
console.log(coords);
});
}
}
});
});에러 로그를 보면 franAddress undefined 오류가 나네요.
positions[i].franAddress 값이 올바른지 확인 부탁드립니다.