지도가 원형으로 나옵니다

카카오맵 API (지도/로컬)
1

웹에서 지도 로딩시 아래처럼 오류가 뜹니다.

sdk.js?appkey=xxxxxxxxxx A parser-blocking, cross site (i.e. different eTLD+1) script, http://t1.daumcdn.net/mapjsapi/js/main/4.3.1-fixed/kakao.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

이후 팝업으로 지도를 로딩하면 아래처럼 지도가 보여집니다.

image

display:none이었다가 클릭 해당 div를 show로 변경합니다.
다른 곳에서 클릭시 ajax로 위치정보를 불러온후 아래 function 을 이용해서 지도를 보여주고 있습니다.
setChargeMap(latitude, longitude);

2

해당 로그는 지도 내부의 document.write() 관련 경고 메세지로 아래 답변 참고해주세요.
https://devtalk.kakao.com/t/topic/53763/2

3

일단 경고는 혹시나 해서 참고로 쓴 것이구요.
궁금한점은 왜 저렇게 둥근 타일 형태로 나오냐는 것입니다.
다른 페이지에서는 정확하게 나오거든요.
상단에서 불러오는 css등이 달라서 생기는 것인지
어떤게 잘못되면 그런지 힌트를 주시면 감사하겠습니다.

=======================================
이글 쓰면서 힌트를 얻어서 참고하는 css를 다 삭제하니 정상으로 나오네요. ^^

1개의 좋아요
4

자답입니다.

참고하는 css의 img 속성 값에 영향을 받네요.
img {
border-radius: 50%;
height: 50px;
width: 50px;
}