특정 조건에서만 아래 소스내용을 include 시켜서 지도를 보여주려고 합니다.
테스트 결과 주소를 검색해서 좌표 값 받아오는 API의 실행은 정상적으로 처리되는것 같습니다.
하지만 지도가 보여지지 않는 이슈가 있는데,
해당 부분은 cross-site 이슈때문에 그럴까요?
[도메인 등록은 와일드카드(*) 서브메인 기반으로 등록되어 있습니다.]
<span>위치 / 연락처</span>
<br>
<div id="kakao-map" style="border: 1px solid black; width: 800px; height: 500px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API_KEY&libraries=services"></script>
<script>
var mapContainer = document.getElementById('kakao-map');
var mapOption = {
center: new kakao.maps.LatLng(37.5115664587287, 127.02155470114),
level: 3
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
var insertTextLine = '';
if (null != result[0].address_type && '' != result[0].address_type) {
if (result[0].address_type == 'ROAD') {
insertTextLine = ('<strong style="float : left; margin-left:10px;">도로명</strong><br>'+result[0].address_name);
} else if (result[0].address_type == 'ROAD_ADDR') {
insertTextLine = ('<strong style="float : left; margin-left:10px;">도로명 주소</strong><br>'+result[0].address_name);
} else if (result[0].address_type == 'REGION') {
insertTextLine = ('<strong style="float : left; margin-left:10px;">지명</strong><br>'+result[0].address_name);
} else if (result[0].address_type == 'REGION_ADDR') {
insertTextLine = ('<strong style="float : left; margin-left:10px;">지번 주소</strong><br>'+result[0].address_name);
} else {
insertTextLine = ('<br>'+result[0].address_name);
}
} else {
insertTextLine = ('<strong style="float : left; margin-left:10px;"><br>'+result[0].address_name);
}
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">'+insertTextLine+'</div>',
removable : true
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
</script>
chrome console.
- A cookie associated with a resource at http://sub.도메인.co.kr/ was set with
SameSite=Nonebut withoutSecure. A future release of Chrome will only deliver cookies markedSameSite=Noneif they are also markedSecure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032. - A cookie associated with a cross-site resource at http://kakao.com/ was set without the
SameSiteattribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set withSameSite=NoneandSecure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
소스 내부 주소기반 검색 API 결과(console.log 출력확인) : [{“address”:{“address_name”:“제주특별자치도 제주시 영평동 2181”,“b_code”:“5011013600”,“h_code”:“5011063000”,“main_address_no”:“2181”,“mountain_yn”:“N”,“region_1depth_name”:“제주특별자치도”,“region_2depth_name”:“제주시”,“region_3depth_h_name”:“아라동”,“region_3depth_name”:“영평동”,“sub_address_no”:"",“x”:“126.57049341667”,“y”:“33.4506810661721”},“address_name”:“제주특별자치도 제주시 첨단로 242”,“address_type”:“ROAD_ADDR”,“road_address”:{“address_name”:“제주특별자치도 제주시 첨단로 242”,“building_name”:"",“main_building_no”:“242”,“region_1depth_name”:“제주특별자치도”,“region_2depth_name”:“제주시”,“region_3depth_name”:“영평동”,“road_name”:“첨단로”,“sub_building_no”:"",“underground_yn”:“N”,“x”:“126.57049341667”,“y”:“33.4506810661721”,“zone_no”:“63309”},“x”:“126.57049341667”,“y”:“33.4506810661721”}]