안녕하세요 지금 db에 있는 자료를 연동해서 좌표를 찍어주고 분류를 하려고 합니다.
제가 모든 함수를 쓰면 overlay는 가능하지만 overlayClose not defined 이런식으로 오류가 납니다. 뿐만 아니라 좌표 이동 함수를 사용 했을 때 Cannot read property ‘setCenter’ of null 이와 같이 오류가 납니다 어떤 문제인지 알고 싶습니다. 부탁드리겠습니다.
제 코드는 다음과 같습니다
function makemap() {
// let city=$('#inputState_select1').val();
// let gu = $('#inputState_select2').val();
// let media1 =$('#inputState_select3').val();
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.564214, 127.001699), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
console.log("여기가 두번쨰")
$.ajax({
type: "GET",
url: "/api/find",
data: {},
success: function(response){
let result = response
let seoul =result['seoul']
let jeolla =result['Jeolla']
let gyeongsang= result['gyeongsang']
let gangwon= result['Gangwon']
for(let i = 0 ; i <seoul.length; i++){
let name = seoul[i]['name']
let dish = seoul[i]['dish']
let address= seoul[i]['add']
let media =seoul[i]['media']
let url =seoul[i]['src']
let X =seoul[i]['X']
let Y = seoul[i]['Y']
// 정상적으로 검색이 완료됐으면
var coords = new kakao.maps.LatLng(X, Y);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' '+name+'' +
' <div class="close" '+
'onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="'+url+'" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">'+address+'</div>' +
' <div class="jibun ellipsis">'+media+'</div>' +
' <div><a href="https://www.google.co.kr/maps/search/'+name+address+'" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 인포윈도우로 장소에 대한 설명을 표시합니다
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
marker.setMap(map);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
}
}
})
}
function closeOverlay() {
overlay.setMap(null);
}
function setCenter() {
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new kakao.maps.LatLng(33.452613, 126.570888);
map.setCenter(moveLatLon);
}