카카오 지도 api 오류

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

지도가 뜨지않고
url(“http://t1.daumcdn.net/mapjsapi/images/bg_tile.png”)
해당 이미지가 뜹니다

앱키 재발급해서 사용했는데, 이과정에서 문제가 있었을까요?

2

콘솔 오류가 출력된다면 오류 내용과 현상을 확인할 수 있는 소스 코드 또는 외부에서 확인 가능한 URL 첨부해주세요.

3

제목 없음

콘솔창 에러입니다

4

현상을 확인할 수 있는 코드도 첨부 부탁드립니다.

5 
<!-- modal : s -->
<div class="modal modal_floor_plan">
  <img src="/images/btn_close.png" alt="x" onclick="javascript:modal_close('floor_plan')" class="btn_close">
  <div class="" onclick="event.stopPropagation();">
    <div id="staticMap" style="width:1600px;height:800px;"></div>
  </div>
</div>
<div class="md_overlay md_overlay_floor_plan" onclick="javascript:modal_close('floor_plan')"></div>
<!-- modal : e -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=ea658b6f37bb6765143d12775b7e3605"></script>
<script>

// 이미지 지도에 표시할 마커입니다
// 이미지 지도에 표시할 마커를 아래와 같이 배열로 넣어주면 여러개의 마커를 표시할 수 있습니다
var markers = [
    {
        position: new kakao.maps.LatLng(33.450701, 126.570667)
    },
    {
        position: new kakao.maps.LatLng(33.450001, 126.570467),
        text: '텍스트를 표시할 수 있어요!' // text 옵션을 설정하면 마커 위에 텍스트를 함께 표시할 수 있습니다
    }
];

var staticMapContainer  = document.getElementById('staticMap'), // 이미지 지도를 표시할 div
    staticMapOption = {
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 이미지 지도의 중심좌표
        level: 3, // 이미지 지도의 확대 레벨
        // marker: markers // 이미지 지도에 표시할 마커
    };

// 이미지 지도를 생성합니다
var staticMap = new kakao.maps.StaticMap(staticMapContainer, staticMapOption);

var imageSrc = 'http://alllite.admin.rocateerdev.co.kr/images/i_marker.png', // 마커이미지의 주소입니다
    imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
    imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
    markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: markerPosition,
    image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(staticMap);
</script>
6

모달창인 경우 display 스타일 속성이 none인 상태에서 지도가 생성되게 됩니다.
이때, 지도의 크기가 정확하지 않은 상태에서 생성되기 때문에 모달창이 열린 다음에 staticMap을 생성해주세요.
또는 staticMap이 아닌 일반 지도를 사용하고, 모달 창이 열릴 때 relayout을 호출하는 방법이 있습니다.

그리고 staticMap에서 마커를 생성할 때 marker 옵션으로 넘겨줘야 합니다.

var staticMapOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 이미지 지도의 중심좌표
    level: 3, // 이미지 지도의 확대 레벨
    marker: markers // 이미지 지도에 표시할 마커
};

이미지 지도와 마커 생성 예제 참고해주시고,
http://apis.map.kakao.com/web/sample/staticMapWithMarkerText/

일반 지도로 변경할 경우 relayout 호출에 관련 답변도 참고해주세요.
https://devtalk.kakao.com/t/topic/103783/3?u=lea.ju

7

안녕하세요, 혹시 정적 지도는 marker 이미지를 커스텀하게 변경할 수 없을까요?
기존 map에서 marker 옵션으로 image 프로퍼티를 전달 할 수 있는데, staticMap doc에서는 marker 객체의 타입이 명시되어 있지 않아서, 이 부분이 가능한지 문의드립니다!

8

정적지도는 마커 이미지 변경 기능을 지원하지 않습니다.