[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
팝업을 열면 그때마다 아래와 코드로 지도를 세팅하고 있습니다.
문제는 처음 팝업을 열땐 정상적으로 나오는데,
두 번째 부터는 다음과 같이 백그라운드 이미지가 뜹니다…
var keyword = "", latitude = 0.0, longitude = 0.0, address = "", zoomLevel = 3;
var container = document.getElementById('map-wrap');
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(37.57677706021695, 126.89122072433933), //지도의 중심좌표
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
var marker = new kakao.maps.Marker();
var searchDetailAddrFromCoords = function (coords, callback) {
// 좌표로 법정동 상세 주소 정보를 요청
geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}
//위도 경도 정보로 주소 정보 세팅
var searchAddress = function (coords) {
searchDetailAddrFromCoords(coords, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
console.log(result[0]);
//console.log("도로명주소: " + result[0].road_address.address_name);
// 지번주소
if (result[0].address) {
console.log("지번주소: " + result[0].address.address_name);
address = result[0].address.address_name;
}else{
address = "";
}
setAddress();
}else{
console.log(result);
}
});
}
var loadMap = function () {
// 주소로 좌표를 검색
geocoder.addressSearch(keyword, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시
marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 지도의 중심을 결과값으로 받은 위치로 이동
map.setCenter(coords);
searchAddress(coords);
latitude = coords.getLat(); //위도
longitude = coords.getLng(); //경도
}else{
console.log(result);
}
});
};
var setAddress = function () {
//zoomLevel = map.getLevel(); // 지도의 줌 레벨을 가져옴
var shareURL = latitude + ',' + longitude;
$('#mapAddLayerCont')
.find('.address').val(address).end()
.find('.address_url').val(shareURL);
}
// 지도를 클릭했을 때 클릭 위치 좌표에 대한 주소정보 조회
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 클릭한 위도, 경도 정보
var latlng = mouseEvent.latLng;
// 마커 위치를 클릭한 위치로 이동
marker.setPosition(latlng);
latitude = latlng.getLat(); //위도
longitude = latlng.getLng(); //경도
searchAddress(mouseEvent.latLng);
});