수고 많으십니다.
며칠째 고생하고 있어서 이렇게 질문드립니다.
지도api예제를 사이트 루트폴더에 넣고 실행하면
주소검색창에 주소를 입력하면 목록이 나오고 목록중 하나를 선택하면
선택된 것이 텍스트입력박스를 차지하고
아래에 지도맵에 그 위치가 표시되어야 하는데
텍스트입력박스까지만 차지하고
지도맵은 보이지 조차 않습니다,
크롬 개발자도구 콘솔을 보니 아래와 같은 에러 메세지가 뜨네요.
카카오 어플리케이션에서 별도로 설정해야하는 것이 있나요?
어플리케이션 키중에서 자바스크립트 키를 입력했습니다.
사이트도메인도 정확히 입력했습니다.
같은 소스에 각 사이트 마다 달리 등록한 자바스크립트 키값만 바꾸어 실행하는데,
https://wonderful.kr/map_juso.html
에서는 되는데
http://wonderful.co.kr/map_juso.html
에서는 안됩니다,
-----------------------------아래는 크롬 개발자 콘솔메세지-----
map_juso.html:1 Access to XMLHttpRequest at ‘http://dapi.kakao.com/v2/local/search/address.json?query=서울%20서대문구%20창천동%20501-3&page=1&size=10’ from origin ‘http://wonderful.co.kr’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.
dapi.kakao.com/v2/local/search/address.json?query=서울%20서대문구%20창천동%20501-3&page=1&size=10:1 Failed to load resource: net::ERR_FAILED
{“errorType”:“AccessDeniedError”,“message”:“cannot find Authorization : KakaoAK header”}
---------------------아래는 예제소스입니다,-------
-------------------------------------------참고로 예제소스입니다.-
<body>
<input type="text" id="sample5_address" placeholder="주소">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d147d89e4f4b8740521a9866312d6cfc&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
//지도를 미리 생성
var map = new daum.maps.Map(mapContainer, mapOption);
//주소-좌표 변환 객체를 생성
var geocoder = new daum.maps.services.Geocoder();
//마커를 미리 생성
var marker = new daum.maps.Marker({
position: new daum.maps.LatLng(37.537187, 127.005476),
map: map
});
function sample5_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
var addr = data.address; // 최종 주소 변수
// 주소 정보를 해당 필드에 넣는다.
document.getElementById("sample5_address").value = addr;
// 주소로 상세 정보를 검색
geocoder.addressSearch(data.address, function(results, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var result = results[0]; //첫번째 결과의 값을 활용
// 해당 주소에 대한 좌표를 받아서
var coords = new daum.maps.LatLng(result.y, result.x);
// 지도를 보여준다.
mapContainer.style.display = "block";
map.relayout();
// 지도 중심을 변경한다.
map.setCenter(coords);
// 마커를 결과값으로 받은 위치로 옮긴다.
marker.setPosition(coords)
}
});
}
}).open();
}
</script>
</body>