다음카카오 지도 사용법

1. 다음 카카오 API 에 사이트 도메인 등록

 

https://developers.kakao.com/apps/275571/settings/general

 

[플랫폼]->[사이트도메인]

http:// 를 포함한 주소 입력

예) http://www.tistory.com

 

 

 

2. 다음카카오맵 api 사용법 예제

 

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

굵은 색 란이 app key 값 입니다. 위의 스크립트는 공통 페이지에 넣으시던지 단일 페이지에 넣으시던지

무조건 선언

 

level 이 높아질수록 지도가 축소되어 범위가 넓어보입니다. 여러개의 마커가 들어갈 경우 확인해가시며 레벨을 조정 부탁드립니다.

기존에 있던 지도를 변경하는 것이라, 쉽게 변경하실 수 있을 겁니다.

 

 

 2-1. 맵에 표시할 마커가 1개 일때

 http://www.hwaseunggroup.com/php/sub01_08_01_01.php

 

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

<script>

var mapContainer = document.getElementById('map_canvas'), // 지도를 표시할 div

mapOption = {

center: new daum.maps.LatLng(35.1844908,129.079995,15), // 지도의 중심좌표

level: 3 // 지도의 확대 레벨

};

 

var map = new daum.maps.Map(mapContainer, mapOption);

 

// 마커가 표시될 위치입니다

var markerPosition  = new daum.maps.LatLng(35.1844908,129.079995,15);

 

// 마커를 생성합니다

var marker = new daum.maps.Marker({

position: markerPosition

});

 

// 마커가 지도 위에 표시되도록 설정합니다

marker.setMap(map);

 

var iwContent = '<div style="padding:5px;">(주) 화승네트웍스 본사 (11, 12층),<br />(주) 화승인더스트리 본사 (6층),<br />(주) 화승엑스윌 본사 (7, 8층),<br />화승 회장실 (5층)</div>',

iwPosition = new daum.maps.LatLng(35.1844908,129.079995,15); //인포윈도우 표시 위치입니다

 

// 인포윈도우를 생성합니다

var infowindow = new daum.maps.InfoWindow({

position : iwPosition,

content : iwContent

});

 

// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다

infowindow.open(map, marker);

</script>

 

 

 

 2-2. 맵에 표시할 마커가 2개 이상일때

  http://www.hwaseunggroup.com/php/sub01_08_01_04_kakao.php

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=682f16103086c2fb73fd55d046e41cee"></script>

<script>

 

var mapContainer = document.getElementById('map_canvas'), // 지도를 표시할 div

mapOption = {

center: new daum.maps.LatLng(36.8360222,126.9593173,15), // 지도의 중심좌표

level: 9 // 지도의 확대 레벨

};

 

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

 

// 마커를 표시할 위치와 title 객체 배열입니다

var positions = [

{

title: '㈜화승T&C 아산공장',

latlng: new daum.maps.LatLng(36.7851679,126.9532865,15)

},

{

title: '㈜화승인더스트리 공장',

latlng: new daum.maps.LatLng(36.9050659,127.0220684,15)

}

];

 

 

for (var i = 0; i < positions.length; i ++) {

    // 마커를 생성합니다

var marker = new daum.maps.Marker({

map: map, // 마커를 표시할 지도

position: positions[i].latlng, // 마커를 표시할 위치

title : positions[i].title

});

 

 

var iwContent = '<div style="padding:5px;">'+positions[i].title+'</div>',

iwPosition = new daum.maps.LatLng(positions[i].latlng); //인포윈도우 표시 위치입니다

 

// 인포윈도우를 생성합니다

var infowindow = new daum.maps.InfoWindow({

position : iwPosition,

content : iwContent

});

 

// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다

infowindow.open(map, marker);

}

 

 

// 마커가 지도 위에 표시되도록 설정합니다

//marker.setMap(map);

 

</script>