[JavaScript] 카카오 맵 사용해보기

카카오맵 가이드 : apis.map.kakao.com/web/guide/

카카오 맵은 가이드 페이지에 설명과 예제가 잘 되어 있으니 기본 설명은 간략히 하고, 사용하며 겪는 어려움 위주로 설명하겠습니다. 우선, 카카오 맵은 JavaScript 키가 있어야 합니다.

• JavaScript 키 위치 : developers.kakao.com > 내 애플리케이션 > 생성한 앱 선택 

그리고 카카오 맵을 다용도로 사용하기 위한 기본 샘플 코드를 GitHub에 올려두었으니 참고 바랍니다. [여기]

샘플 코드의 데모 사이트는 [여기]를 참고 바랍니다.

 

기본 세팅

지도를 내 웹사이트에 표시하고 싶다면 아래와 같이 표시합니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2d68640b56d986af5c8a48505c7c8c71&libraries=services,clusterer,drawing"></script>
<script>
	var container = document.getElementById('map');
	var options = {
		center: new kakao.maps.LatLng(33.450701, 126.570667),
		level: 3
	};
	var map = new kakao.maps.Map(container, options);
</script>

• clusterer: 마커를 클러스터링 할 수 있는 클러스터러 라이브러리 입니다.
• services: 장소 검색 과 주소-좌표 변환 을 할 수 있는 services 라이브러리 입니다.
• drawing: 지도 위에 마커와 그래픽스 객체를 쉽게 그릴 수 있게 그리기 모드를 지원하는 drawing 라이브러리 입니다.

카카오 지도 사이트로 링크 걸어 표시

지도, 길찾기, 로드뷰, 지도 검색 결과를 바로 링크로 연결할 수 있습니다. 파라메터로 사용되는 위도, 경도, 장소ID조회는 [여기]를 참고하세요. 

/link/map/위도,경도	https://map.kakao.com/link/map/37.402056,127.108212
/link/map/이름,위도,경도	https://map.kakao.com/link/map/우리회사,37.402056,127.108212
/link/map/장소ID	https://map.kakao.com/link/map/18577297
/link/search/검색어	https://map.kakao.com/link/search/카카오

/link/to/이름,위도,경도	https://map.kakao.com/link/to/카카오판교오피스,37.402056,127.108212
/link/to/장소ID	https://map.kakao.com/link/to/18577297

/link/roadview/위도,경도	https://map.kakao.com/link/roadview/37.402056,127.108212
/link/roadview/장소ID	https://map.kakao.com/link/roadview/18577297