카카오맵 API 소개
.. 가 필요할까 싶을정도로 너무도 유명한 카카오 맵 API
원하는 위치를 지도로 나타낼 수 있는 API
그리고 마커(위치 표시)라는 기능의 클릭 이벤트(눌렀을때 실행되는 기능)를 사용하면 다양한 기능을 구현할 수 있다.
공식 문서에 설명이 매우 친절하게 되어있어서, 큰 어려움없이 사용할 수 있다게 장점 👍
사용 방법
다음 내용을 모두 복붙하고, 코드중에서 다음 부분만 수정해주면 끝 👏👏
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 JavaScript 키를 입력해주세요"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다음 지도 API</title>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 JavaScript 키를 입력해주세요"></script>
</head>
<body>
<div id="map" style="width:750px;height:350px;"></div>
</body>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.56561, 126.97832), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 지도 타입 변경 컨트롤을 생성한다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new kakao.maps.ZoomControl();
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(37.56561, 126.97832), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
// 마커에 클릭 이벤트를 등록한다 (우클릭 : rightclick)
kakao.maps.event.addListener(marker, 'click', function() {
alert('마커를 클릭했습니다!');
});
</script>
</html>
발급받은 JavaScript키 .. ?
카카오 맵 API 기능을 사용하기 위해선, 해당 서비스를 제공하는 카카오 디벨로퍼스에 가입되어있어야한다.
만약 가입되어있지 않다면, 다음 포스팅을 먼저 참고해보길
📃 KakaoDevelopers (tistory.com)
KakaoDevelopers
KakaoDevelopers 소개 카카오 플랫폼(카톡, 지도, 로그인 .. 등)을 사용하기위한 공식 사이트 📃 Kakao Developers 처음 사용해본다면 어플리케이션 추가하기 카카오 디벨로퍼스에 회원가입후 " 내 어플리
m1nwoo.tistory.com
1. 카카오 디벨로퍼스 사이트 상단 네비바에 있는 " 내 애플리케이션 " 버튼 클릭
2. 내가 생성했던 애플리케이션 클릭 ( 없으면 애플리케이션 추가하기 )
3. 아래 이미지에 테두리쳐진 정보중에서, JavaScript키를 복사하고,
위에 " 사용 방법 " 에 적혀있던 코드중, 다음 코드 부분을 붙여넣기로 바꿔주면 끝 😀
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 JavaScript 키를 입력해주세요"></script>
JavaScript키를 입력했지만 안될경우
내 어플리케이션 생성은 했지만, 플랫폼 설정을 안했을경우에서 발생하는 경우가 많었다.
다음 포스팅을 참고해보자
👀 KakaoDevelopers (tistory.com)
KakaoDevelopers
KakaoDevelopers 소개 카카오 플랫폼(카톡, 지도, 로그인 .. 등)을 사용하기위한 공식 사이트 📃 Kakao Developers 처음 사용해본다면 어플리케이션 추가하기 카카오 디벨로퍼스에 회원가입후 " 내 어플리
m1nwoo.tistory.com
플랫폼 설정을 했는데도 안된다면
👉 보통 플랫폼에 등록한 주소가 http://localhost:8080 으로 되어있을텐데, 본인이 8080 포트를 쓰고있는지 확인해보자.
더 많은 정보가 궁금하다면
카카오 맵 API 공식 문서에 매우 친절하게 정리되어있다 .. ! 😀
'🔨 Tool > Etc ..' 카테고리의 다른 글
| 자주 가는 사이트 한번에 열기.bat (0) | 2023.09.13 |
|---|---|
| KakaoDevelopers (0) | 2023.09.03 |
| 주소 검색 API - DaumPostCode (0) | 2023.09.03 |
| 간편 결제 API - PortOne (0) | 2023.09.03 |
| 메일 발송 API - Java Mail Sender (0) | 2023.09.02 |