카카오에서 제공하는 api로 카카오 지도를 만들어보다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--key: 카카오 디벨로퍼에서 키를 가져오세요 -->
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오 디벨로퍼에서 키를 가져오세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.1466, 126.9223), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
</body>
</html>
카카오 디벨로퍼
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
카카오디벨로퍼 로그인 후 내 애플리케이션을 만들고 앱키를 가져와서 친절한 카카오의 설명을 보고 따라하면된다.
'Front-End > 4. jQuery' 카테고리의 다른 글
| Ex10_광주관광지.html (0) | 2023.07.03 |
|---|---|
| Ex08_포켓몬도감.html (0) | 2023.06.26 |
| Ex07_비동기 통신.html (0) | 2023.06.22 |
| Ex06_animate.html (0) | 2023.06.22 |
| Ex05_jQuery추가삭제.html (0) | 2023.06.22 |
