min's devlog
카카오 지도 API 연동 본문
640bc2535f7620010ba11ba6b580a675
참고 사이트
https://apis.map.kakao.com/web/guide/
https://developers.kakao.com/console/app/760301/config/platform
Kakao 지도 Javscript API 는 키 발급을 받아야 사용할 수 있다.
1. 카카오 개발자사이트 에서 개발자 등록 및 앱 생성
2. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
3. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록 (예: http://localhost:8080)
4. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용
5. 앱을 실행
# Python이 설치된 컴퓨터에서는 해당 폴더로 이동 후
$ cd /path/to/your/folder/
# 다음과 같이 테스트용 웹 서버를 실행할 수 있다.
$ python -m SimpleHTTPServer 8080- 등록한 도메인(예: http://localhost:8080)에서 웹 서버를 실행시켜 위 파일을 연다.
- 브라우저를 열어 위 도메인에 접속한다.
등록된 사이트 도메인에서만 지도API를 사용할 수 있다.
소스코드
//지도를 담을 영역
<div id="map" style="width:500px;height:400px;"></div>
//실제 지도를 그리는 Javascript API
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>
//지도를 띄우는 코드
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
//전체코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></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>
</body>
</html>
- 지도 지도 API를 이용해서 특정 위치를 표시한 후, 다른 기능을 추가하고 싶다면 지도 URL도 이용할 수 있다.
'til > Front' 카테고리의 다른 글
| jQuery 예제 (0) | 2022.06.19 |
|---|---|
| jQuery (0) | 2022.06.17 |
| [JavaScript] 함수(function) (0) | 2022.06.17 |
| [JavaScript] 객체(Object) (0) | 2022.06.13 |
| [JavaScript] 호이스팅(Hoisting) (0) | 2022.06.13 |
'til/Front' Related Articles
more
Comments