Drawing library, toolbox 도메인에서 실행안되는문제

지도/로컬 API
#1

안녕하세요.
drawing library와 toolbox 예제를 카카오홈페이지 직접해보기에서는 실행이 잘 되는데

제 도메인에서 실행하면 지도만 뜨고 drawing library에서 그리는 버튼이 먹지 않고
toolbox는 상단에 아예 뜨질 않네요.
호출하는 시간에 문제가 있는걸까요?

#2

먼저 스크립트에 라이브러리를 추가됐는지 확인 부탁드립니다.
콘솔에 에러가 있다면 에러 로그도 함께 첨부해주세요.
http://apis.map.kakao.com/web/guide/#whatlibrary

#3

감사합니다. 스크립트에 추가하니 작동합니다.
그런데 제 도메인에서 툴박스 아이콘 클릭할때마다 제목없음 블랭크 탭이 뜨네요.
마찬가지로 카카오개발사이트 직접해보기에서는 블랭크 탭이 뜨지 않습니다.
한번더 알려주시면 감사하겠습니다.

#4

예제에서는 정상적으로 나온다면 작성한 코드와 비교해보셔야 합니다.
manager와 toolbox 선언 부분을 다시 한번 확인해주세요.
또, 콘솔 에러가 찍힌다면 같이 첨부해주세요.
http://apis.map.kakao.com/web/sample/drawingToolbox/

#5

예. 샘플에 있는 코드를 그대로 복사해서 사용했는데
저렇게 툴박스 아이콘 클릭할때마다 제목없음 블랭크 탭이 뜨네요. 블랭크 지우고
마커가 생깁니다.

1

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toolbox 사용하기</title>

</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=drawing"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = { 
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 

// 도형 스타일을 변수로 설정합니다
var strokeColor = '#39f',
fillColor = '#cce6ff',
fillOpacity = 0.5,
hintStrokeStyle = 'dash';

var options = { // Drawing Manager를 생성할 때 사용할 옵션입니다
map: map, // Drawing Manager로 그리기 요소를 그릴 map 객체입니다
drawingMode: [
kakao.maps.Drawing.OverlayType.MARKER,
kakao.maps.Drawing.OverlayType.ARROW,
kakao.maps.Drawing.OverlayType.POLYLINE,
kakao.maps.Drawing.OverlayType.RECTANGLE,
kakao.maps.Drawing.OverlayType.CIRCLE,
kakao.maps.Drawing.OverlayType.ELLIPSE,
kakao.maps.Drawing.OverlayType.POLYGON
],
// 사용자에게 제공할 그리기 가이드 툴팁입니다
// 사용자에게 도형을 그릴때, 드래그할때, 수정할때 가이드 툴팁을 표시하도록 설정합니다
guideTooltip: ['draw', 'drag', 'edit'], 
markerOptions: {
draggable: true,
removable: true
},
arrowOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
hintStrokeStyle: hintStrokeStyle
},
polylineOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
hintStrokeStyle: hintStrokeStyle
},
rectangleOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
fillColor: fillColor,
fillOpacity: fillOpacity
},
circleOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
fillColor: fillColor,
fillOpacity: fillOpacity
},
ellipseOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
fillColor: fillColor,
fillOpacity: fillOpacity
},
polygonOptions: {
draggable: true,
removable: true,
strokeColor: strokeColor,
fillColor: fillColor,
fillOpacity: fillOpacity
}
};

// 위에 작성한 옵션으로 Drawing Manager를 생성합니다
var manager = new kakao.maps.Drawing.DrawingManager(options);

 // Toolbox를 생성합니다. 
// Toolbox 생성 시 위에서 생성한 DrawingManager 객체를 설정합니다.
// DrawingManager 객체를 꼭 설정해야만 그리기 모드와 매니저의 상태를 툴박스에 설정할 수 있습니다.
var toolbox = new kakao.maps.Drawing.Toolbox({drawingManager: manager});

// 지도 위에 Toolbox를 표시합니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOP은 위 가운데를 의미합니다.
map.addControl(toolbox.getElement(), kakao.maps.ControlPosition.TOP);
#6

스크립트 선언이 잘못되어 있습니다.
아래와 같이 선언해주세요.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=drawing"></script>

http://apis.map.kakao.com/web/guide/#whatlibrary

#7

제 개인 apikey라 해당부분은 삭제한것고, 그 부분 문제는 아닌듯합니다.

12

#8

첨부 소스로 실행했더니 빈 페이지가 뜨는 건가요…?
별도 에러코드는 없는지 확인해주시고
소스 코드가 달라졌다면 같이 첨부해주세요.

#10

확인해본결과, 인터넷익스플로러에서는 잘되네요.
크롬에서만 그런거보면 제 개인 인터넷 설정 문제인것같네요.
바쁘신 와중에 신속하고 정확한 답변 감사드립니다.

1개의 좋아요