var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var bounds = new kakao.maps.LatLngBounds();
var map = new kakao.maps.Map(mapContainer, mapOption);
var geocoder = new kakao.maps.services.Geocoder();
$(document).ready(function(){
$.ajax({
type: ‘POST’,
url: ‘${pageContext.request.contextPath}/fran/rest/getFranInfo’,
dataType: ‘json’,
success: function(result) {
var response = result;
alert("1번위치");
// 마을 전체 리스트를 돌면서 마을 위치마다 마커 찍기
$.each(response.data, function(index, value){
// DB에서 주소를 불러와 geocoder를 이용해 좌표로 변환
geocoder.addressSearch(response.data[index].franAddress, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
console.log(response.data[index].franAddress)
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: coords
});
// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 커스텀 오버레이를 닫는 함수
function closeOverlay() {
overlay.setMap(null);
}
// 커스텀 오버레이 생성
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
// 검색된 마커만 지도 위에 표시하기 위해 전체 마커 숨기기
closeOverlay();
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 생성된 마커를 배열에 추가
markers.push(marker);
}
});
})
}
});
});
이렇게 했습니다.
이거 왜 그런가요