카카오 지도api를 불러오면 데이터 로딩중이라고 뜨는데 익스플로러 창 크기를 조절하면 지도가 잘나옵니다.
탭을 누르기 전에 display: none 이 되면서 지도 영역을 계산할 수 없는 상태로
지도가 생성되었기 때문에 탭을 눌러서 해당 영역을 다시 계산하는 로직을 추가하시거나
처음부터 지도 영역을 계산할 수 있게 css를 적용하셔야 합니다.
해당 현상에 대한 자세한 내용은 아래 링크 참고해주세요.
https://devtalk.kakao.com/t/topic/59015
아 탭은 제가 혹시나 이렇게 해보면 되지 않을까 해본거구요 잘 안되서 다시 원상태로 도루묵 해놨어요 다시 한번 봐주세요 이거 오늘 퇴근시간까지 끝내야해서요 ㅜㅜㅜ 도와주세요
아래 로직과 이전 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>
맵 선언할 때 )
안 닫혀있네요.
확인 부탁드립니다.
var firstMap = new kakao.maps.Map(document.getElementById('map'), {
center: new kakao.maps.LatLng(35.964929, 126.541457),
level: 5
}); 이 부분 안 닫혀있어서 ) 추가했어요 그래도.. 여전히 안보여져요
api 인증키도 혹시 다시 받아야할까요?
- customOverlay 부분의 setMap(); 호출 시 선언되지 않은 맵이 할당이 되어 있습니다.
- marker1, marker2의 이미지를 부여한 곳 있는지 이전 url에서 어떻게 했는지 찾아서 적용해보세요.
제가 첨부한 소스는 기본 div 생성이고 안에 text 값도 없기 때문에 지도에 아무 표시가 안됩니다.
예를 들어<div class="marker1">marker1</div>
로 선언하면 텍스트가 보여집니다.
저 질문 전에 마커만 보여지면 된다고 하셨는데 이 부분 해보셨나요?
- firstCustomOverlay.setMap(firstMap);
content:'<div class="marker">marker1</div>'
로 해서 지도가 잘 뜨고 marker1(텍스트)이 보여지는지 확인 부탁드립니다.
이 현상 역시 제가 앞서 단 댓글에서도 설명을 드렸습니다.
같이 참고해주세요.
제가 대신 코드를 작성해주지 않습니다.
customOverlay 부분의 setMap(); 호출 시 선언되지 않은 맵이 할당이 되어 있습니다. 라고 답변드린 것은
스크린샷으로 첨부주신 부분을 보시면 map 변수는 없어서 드린 답변이구요.
firstCustomOverlay.setMap(map); (X)
firstCustomOVer.setMap(fisrtMap); (O)
지금 안 나오고 있는 부분은… kakao is not defined
로 에러가 나고 있습니다.
script로 라이브러리 불러왔는지 확인해주세요.