html css
kakao map API 사용하기
sangming
2022. 12. 15. 20:51
만약 웹페이지에 지도를 추가하고 싶다면 kakao map API를 사용해 보자.
먼저 이 사이트에 접속해서 개발자 등록한 후 앱을 등록한다.
그리고 만들어진 앱에 들어가서 플랫폼에서 Web을 선택하고 도메인을 입력해 준다.
플랫폼을 선택했다면 앱 키에서 Java Script 키를 복사한다.
이제 html 코드를 작성해 보자.
지도 크기 정하기
먼저 지도의 크기를 정해주자.
<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>여기에 발급받은 Java Script 키를 붙여 넣는다.
지도를 띄우는 코드 작성하기
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng( 37.56682645618825, 126.97865791770842), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
전체 코드
<html>
<head>
<title>kakao map api</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(37.56682645618825, 126.97865791770842),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>이렇게 하면 내 웹에 지도가 띄어진다
