[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
회사 legacy 시스템 손 보던 도중, 해당 시스템에 신규 개발할 것이 있어서,
기존 카카오 지도로 개발된 화면에서 발급 받은 키 부분만 참조하여
geocoder로 주소를 이용해 지도 검색하는 화면을 만들었는데요
Local과 Dev 환경에서는 정상적으로 지도가 잘 호출이 되나,
이중화된 운영기에 배포했을 때는, 한 군데에서는 지도가 잘 불러와지지만
나머지 한 군데에서는 잘 불러오지 못했습니다. devtool로 네트워크 확인 했을 때,
정상적인 쪽에서는 http 200 status 지만, 안나오는 쪽에서는 http 302 status 문제가 나오던데,
이게 어떤 경우에 발생할 수 있을지 문의 드립니다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>TokTok</title>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=발급 받은 키&libraries=services"></script>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.map_wrap {position:absolute;overflow:hidden;width:100%;height:100%;}
.pop_num{margin-left: -33px;width:60px;position:absolute;z-index:10;padding:4px 5px 2px;background:#746554;font-family:'굴림',Gulim,sans-serif;font-size:12px;color:#ffffff;font-weight:bold}
p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,p{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'굴림',Gulim,sans-serif;font-size:12px}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
.pop{margin-left: -150px;margin-top: 0px;position:absolute;z-index:10;padding:30px 20px 20px;border:1px solid #888;background:#fff}
.pop .close{position:absolute;top:8px;right:8px}
.table,.table th,.table td{border:0}
.table{width:100%;border-bottom:1px solid #dddee2;table-layout:fixed}
.table caption{display:none}
.table th{padding:8px 0 5px 10px;border-top:1px solid #dddee2;background:#f1f1f3;color:#666;font-weight:bold;text-align:left;vertical-align:top}
.table td{padding:8px 5px 5px 12px;border-top:1px solid #dddee2;line-height:16px;vertical-align:top}
</style>
</head>
<body>
<input type="hidden" name="address" id="address">
<input type="hidden" name="cafeteriaName" id="cafeteriaName">
<div class="map_wrap">
<div id="map" style="width:100%;height:100%;position:absolute;overflow:hidden;"></div>
</div>
<div id="clickLatlng"></div>
<script>
/* 지도 생성 관련 내용 */
var mapContainerMain = document.getElementById('map'), // 지도를 표시할 div
mapOptionMain = {
center: new daum.maps.LatLng(37.488478, 127.098831), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainerMain, mapOptionMain);
var cafeAddress = '<%= request.getParameter("address") %>';
var cafeteriaName = '<%= request.getParameter("cafeteriaName") %> ';
//주소-좌표 변환 객체 생성
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색하고 마커를 표시합니다
//geocoder.addressSearch('거제시 거ㅈ면 송곡1길', function(result, status) {
geocoder.addressSearch(cafeAddress, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (result.length > 0) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
var message = 'latlng: new kakao.maps.LatLng(' + result[0].y + ', ';
message += result[0].x + ')';
// 결과 표시
var resultDiv = document.getElementById('clickLatlng');
resultDiv.innerHTML = message;
// 마커 표시
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우 표시
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + cafeteriaName + '</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동
map.setCenter(coords);
} else {
// Status가 OK가 아닌 경우, 주소가 정상적이지 않다는 메시지 표시
alert("정확하지 않은 주소 입니다");
}
});
</script>