<script 태그에 닫는 태그가 없습니다. error :320 Daum 지도 api 시작하기

매뉴얼

지도API Daum 지도 api 시작하기

※ 다음 지도 api를 사용하기 위해서는 API Key를 발급받아야 합니다.

 http://apis.map.daum.net/ 여기를 먼저 방문해서 key를 발급받으시기 바랍니다.

 

콘솔 탭에서 지도 api key를 발급 받을 앱을 생성합니다

 

생성된 앱 화면에서 API Key 등록버튼을 누릅니다.

 

REST/JS API 추가 버튼을 누르고 팝업 창이 뜨면 플랫폼을 선택합니다. 저는 브라우저 용을 쓸것이라 웹브라우저 탭을 선택했습니다.

Referer 입력 란에 사용할 도메인 주소를 http:// 를 붙여서 입력합니다.

 

API Key 발급이 완료되었습니다 API 키를 드래그 해서 복사해주세요

 

<!-- 로드뷰를 표시할 div 입니다 -->
<div id="daum_map" style="width:100%;height:800px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API Key를 여기 입력하세요"></script>

<script>

var container = document.getElementById('daum_map'); //지도를 표시할 div
var options = {
 center: new daum.maps.LatLng(35.17969, 129.07564),
 level: 3
};

var map = new daum.maps.Map(container, options); //지도 생성

//마커 옵션
var markerPosition  = new daum.maps.LatLng(35.17969, 129.07564);
var marker = new daum.maps.Marker({
    position: markerPosition
});

marker.setMap(map); //마커 생성

// 마커 위에 표시할 인포윈도우를 생성한다
var infowindow = new daum.maps.InfoWindow({
 content : '<div style="padding:5px;">부산시청입니다</div>' // 인포윈도우에 표시할 내용
});

// 인포윈도우를 지도에 표시한다
infowindow.open(map, marker);

// 마커에 클릭 이벤트를 등록한다 (우클릭 : rightclick)
daum.maps.event.addListener(marker, 'click', function() {
 alert('마커를 클릭했습니다!');
});

//맵 컨트롤 생성
var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

</script>

완성화면 : http://wdev.anybuild.co.kr/page/d_addr

다음 지도 API 메뉴얼 http://apis.map.daum.net/web/guide/

다음 지도 API 마법사 http://apis.map.daum.net/web/wizard/

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top