[JS] 카카오 맵 API 구현하기

카카오맵 API 구현하기

1. 카카오 맵 API 연결

https://developers.kakao.com/

Kakao Developers

애플리케이션 생성 및 도메인 등록 & 앱 키 발급 진행

 

 

2. 등록할 장소 찾기

https://map.kakao.com/

카카오맵

 

카카오 맵에 등록할 장소 검색

728x90

 

 

 

HTML 태그 복사클릭하면 해당 JS 코드가 복사된다.

 

 

3. HTML, JS 코드 삽입

JS

<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script>
    new daum.roughmap.Lander({
    "timestamp" : "12345",
    "key" : "abcde",
    "mapHeight" : "360"
    }).render();
</script>

1) 상단에 카카오 script 이용 위한 링크 import

2) 복사한 JS 코드 붙혀넣기 (timestamp 및 key는 예시로 넣었다)

3) mapHeight로 지도 높이 조정 가능

 

+추가 옵션 내용

<script>
    new daum.roughmap.Lander({
        "timestamp" : "12345",
        "key" : "abcde",
    	"mapHeight" : "360"
        "mapWidth": "100%",  // 지도 너비
        "level": 3,          // 지도 확대 레벨
        "mapType": "roadmap",// 지도 타입
        "useZoomControl": true,     // 확대/축소 컨트롤 사용
        "useMapTypeControl": true,  // 지도 타입 컨트롤 사용
        "marker": true,             // 마커 표시
        "markerTitle": "카카오",  // 마커 타이틀
        "infoWindow": "여기가 카카오입니다~"  // 정보 창 내용
    }).render();
</script>

 

 

HTML

<div class="map">
	<div id="daumRoughmapContainer12345" class="root_daum_roughmap root_daum_roughmap_landing"  style="width:100%;"></div>
</div>

내부 div id에 위에서 발급받은 timestamp (예시:12345) 붙혀넣기