![[API] 웹 페이지에 카카오맵 지도 띄우기 [Kakao Map API 키 발급 및 사용하기]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FO0sOs%2FbtssgKWLYX6%2FHp5KtYSJB6jTykWcUZbFwK%2Fimg.png)
- 웹 페이지에 카카오맵 띄우기
- 카카오맵 API 키 발급 방법 : https://apis.map.kakao.com/web/guide
- 지도를 담을 영역 만들기
<div id="map" style="width:500px;height:400px;"></div>- 실제 지도를 그리는 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); //지도 생성 및 객체 리턴- 지도에서 위도, 경도 찾는 방법
[꿀팁] Google 지도에서 위도, 경도 찾는 방법 [구글 지도에서 좌표 찾기]
- Google 지도에서 위도, 경도 찾는 방법
yermi.tistory.com
- 전체 코드
<!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>
참고자료 : https://apis.map.kakao.com/web/guide