지도 로딩 시 문제 없었다가 갑자기 문제 발생

지도/로컬 API
1

카카오 지도api를 불러오면 데이터 로딩중이라고 뜨는데 익스플로러 창 크기를 조절하면 지도가 잘나옵니다.

2

탭을 누르기 전에 display: none 이 되면서 지도 영역을 계산할 수 없는 상태로
지도가 생성되었기 때문에 탭을 눌러서 해당 영역을 다시 계산하는 로직을 추가하시거나
처음부터 지도 영역을 계산할 수 있게 css를 적용하셔야 합니다.

해당 현상에 대한 자세한 내용은 아래 링크 참고해주세요.
https://devtalk.kakao.com/t/topic/59015

3

아 탭은 제가 혹시나 이렇게 해보면 되지 않을까 해본거구요 잘 안되서 다시 원상태로 도루묵 해놨어요 다시 한번 봐주세요 이거 오늘 퇴근시간까지 끝내야해서요 ㅜㅜㅜ 도와주세요

4

아래 로직과 이전 http://plan6.mygunsan.net/contents.htm?code=4_1 구현 부분을
다시 참고하여 해결하시면 될 것 같습니다.

<body>
<div id="firstMap" style="width:100%;height:350px;"></div>
<div id="secondMap" style="width:100%;height:350px;"></div>
<script>
    // firstMap
    var firstMapControl = new kakao.maps.MapTypeControl();

    var firstMap = new kakao.maps.Map(document.getElementById('firstMap'), {
        center: new kakao.maps.LatLng(35.964929, 126.541457),
        level: 5
    });

    firstMap.addControl(firstMapControl, daum.maps.ControlPosition.TOPRIGHT);

    //마커정보
    var fistCustomOverlay = new kakao.maps.CustomOverlay({
        position: new kakao.maps.LatLng(35.964929, 126.541457),
        content: '<div class="marker1"></div>',
        xAnchor: 0.5,
        yAnchor: 1
    });

    fistCustomOverlay.setMap(firstMap);


    // secondMap
    var secondMapControl = new kakao.maps.MapTypeControl();
    var secondMap =  new kakao.maps.Map(document.getElementById('secondMap'), 
    {
        center: new kakao.maps.LatLng(37.487190, 127.033537),
        level: 5
    });

    secondMap.addControl(secondMapControl, kakao.maps.ControlPosition.TOPRIGHT);

    //마커정보
    var secondCustomOverlay = new kakao.maps.CustomOverlay({
        position: new kakao.maps.LatLng(37.487190, 127.033537),
        content: '<div class="marker2"></div>',
        xAnchor: 0.5,
        yAnchor: 1
    });

    secondCustomOverlay.setMap(secondMap);
</script>
6

맵 선언할 때 ) 안 닫혀있네요.
확인 부탁드립니다.

8 
			        var firstMap = new kakao.maps.Map(document.getElementById('map'), {
			          center: new kakao.maps.LatLng(35.964929, 126.541457),
			          level: 5
			        });    이 부분 안 닫혀있어서 ) 추가했어요 그래도.. 여전히 안보여져요

http://plan6.mygunsan.net/contents.htm?code=2_1#:;

9

api 인증키도 혹시 다시 받아야할까요?

10
  1. customOverlay 부분의 setMap(); 호출 시 선언되지 않은 맵이 할당이 되어 있습니다.
  2. marker1, marker2의 이미지를 부여한 곳 있는지 이전 url에서 어떻게 했는지 찾아서 적용해보세요.
    제가 첨부한 소스는 기본 div 생성이고 안에 text 값도 없기 때문에 지도에 아무 표시가 안됩니다.
    예를 들어 <div class="marker1">marker1</div> 로 선언하면 텍스트가 보여집니다.
12

https://okky.kr/article/504765

https://forybm.tistory.com/3

저랑 비슷한 현상인거 같은데… 이부분도 해봤지만 효과는 없네요

13

저 질문 전에 마커만 보여지면 된다고 하셨는데 이 부분 해보셨나요?

  1. firstCustomOverlay.setMap(firstMap);
  2. content:'<div class="marker">marker1</div>' 로 해서 지도가 잘 뜨고 marker1(텍스트)이 보여지는지 확인 부탁드립니다.

이 현상 역시 제가 앞서 단 댓글에서도 설명을 드렸습니다.
같이 참고해주세요.

15

제가 대신 코드를 작성해주지 않습니다.

customOverlay 부분의 setMap(); 호출 시 선언되지 않은 맵이 할당이 되어 있습니다. 라고 답변드린 것은

스크린샷으로 첨부주신 부분을 보시면 map 변수는 없어서 드린 답변이구요.
firstCustomOverlay.setMap(map); (X)
firstCustomOVer.setMap(fisrtMap); (O)

지금 안 나오고 있는 부분은… kakao is not defined 로 에러가 나고 있습니다.
script로 라이브러리 불러왔는지 확인해주세요.