지도가 출력이 되지 않습니다

지도/로컬 API
#1

특정 조건에서만 아래 소스내용을 include 시켜서 지도를 보여주려고 합니다.

테스트 결과 주소를 검색해서 좌표 값 받아오는 API의 실행은 정상적으로 처리되는것 같습니다.
하지만 지도가 보여지지 않는 이슈가 있는데,
해당 부분은 cross-site 이슈때문에 그럴까요?

[도메인 등록은 와일드카드(*) 서브메인 기반으로 등록되어 있습니다.]

no-image_map

<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.

  1. A cookie associated with a resource at http://sub.도메인.co.kr/ was set with SameSite=None but without Secure. A future release of Chrome will only deliver cookies marked SameSite=None if they are also marked Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.
  2. A cookie associated with a cross-site resource at http://kakao.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. 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”}]

#2

경고 메세지와는 무관합니다.
(메세지 내용은 Gatsby 코드에서 map을 불러오는 코드를 작성중입니다 참고해주세요.)

지도가 보여지는 시점에 relayout()을 호출하여 확인 부탁드립니다.
relayout에 대한 설명은 아래 링크에서 확인해주세요.

#3

빠른 답변을 주셧으나, 제가 확인이 늦었네요.

답변 주신 내용을 참고하여 처리를 하였으나 개선되지 않는 문제가 있습니다. ㅠ

  1. setTimeout 을 설정하는 방법
    -> 시간 이후에도 변화하지 않음.
  2. 버튼 기반 relayout() 호출
    -> 변화 없음.

기본 예제 코드를 기반으로 진행해도 동일 현상이 발생. 지도 자체가 그려지지 않는 이슈가 지속됩니다.

		    <span>위치 / 연락처</span>
			<br>
			<div id="kakao-map" style="border: 1px solid black; width: 800px; height: 500px;"></div>
			<button onclick="relayout()">relayout 호출하기</button>
			<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'), // 지도를 표시할 div 
			    mapOption = { 
			        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
			        level: 3 // 지도의 확대 레벨
			    };
	
				var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
				setTimeout(function() {
					console.log('Works!');
					map.relayout();
				}, 3000);
		
				function relayout() {    
					console.log('call relayout!');
				    // 지도를 표시하는 div 크기를 변경한 이후 지도가 정상적으로 표출되지 않을 수도 있습니다
				    // 크기를 변경한 이후에는 반드시  map.relayout 함수를 호출해야 합니다 
				    // window의 resize 이벤트에 의한 크기변경은 map.relayout 함수가 자동으로 호출됩니다
				    map.relayout();
				}
			</script>
#4 
  	<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">

여기에서

src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API_KEY&libraries=services">를
src=“https://dapi.kakao.com/v2/maps/sdk.js?appkey=API_KEY&libraries=services”>로 수정하세요.
APII_KEY 대신에 발급받은 앱키를 복붙해서 붙여넣으시구요

#5

답변 감사합니다.

말씀해주신 부분에 대하여 적용 하였으나, 지도가 그려지지 않는 부분이 있습니다.

API_KEY는 데브톡에 글올릴때 자체적으로 마스킹처리를 한것이며,
서버에 업로드시에는 앱에 발급된 키로 적용되어 올라가고 있습니다.

#6

창 크기를 조절해도 동일한 현상인 거죠?
위 링크에 있는 설명처럼 지도가 hide/show 되는 구조도 아니구요?

개발자 도구 network 탭에서 지도 타일 이미지를 불러오는지,
콘솔 창에 따로 에러코드는 없는지,
따로 커스텀하게 적용한 CSS가 지도에 영향을 주고 있지는 않은지 확인 부탁드립니다.

#7

네트워크 처리 내용 전부 확인해보니 정상적으로 맵 이미지도 가져오는것 확인완료 하였으며,
맵 이미지가 지도 영역에 출력되지 않는 이슈로 한참 고민 하였으나

조언해주신 것을 기반으로 다시 한번 확인 결과, 특정 css에서의 이슈 였던것으로 확인하였습니다.
감사합니다.

1개의 좋아요