-
카카오 API를 활용해서 지도 만들기Projects/맛집지도만들기 2022. 8. 25. 08:51
https://apis.map.kakao.com/
APP KEY발급을 한다. 애플리케이션 추가를 눌러서 아래처럼 한다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>맛집지도</title> <meta name="author" content="동네코딩" /> <meta name="description" content="맛집지도 서비스" /> <meta name="keywords" content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버" /> # 카카오 API <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a9042c8442a474159d119ba1d34a7570"></script> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <h1 class="nav-title">맛집지도</h1> <button class="nav-contact">Contact</button> </div> </div> </nav> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">한식</button ><button class="category-item">중식</button ><button class="category-item">일식</button ><button class="category-item">양식</button ><button class="category-item">분식</button ><button class="category-item">구이</button ><button class="category-item">회/초밥</button ><button class="category-item">기타</button> </div> </div> </div> </section> <!-- 카카오지도 --> <div class="inner"> # 반응형으로 만듬 <div id="map" style="width:500px;height:400px;"></div> </div> </main> <script src="script.js"></script> # JS 연결 </body> </html>@font-face { font-family: "Open Sans"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff") format("woff"); font-weight: normal; font-style: normal; } * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 10px; font-family: "KyoboHandwriting2020A"; } .category-title{ font-size: 3rem; } .category-item{ width: 25%; height: 5rem; background : none; border: none; font-family: inherit; font-size: 1.6 rem; } .category-item:hover{ color: rgb(255, 17, 0); cursor: pointer; } nav { background-color: #4206e6; } .nav-container { padding: 1rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav-title { font-size: 3rem; } .nav-contact { font-size : 3rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .inner{ padding : 0 2rem; } @media all and (min-width: 1024px) { .inner { max-width: 1024px; margin: 0 auto; } } /* 카카오맵css */ /* % 단위는 부모태그 기준으로 함 따라서 사용하려면 body의 width, height 를 지정해 줘야 한다*/ /* body태그 안의 자식 태그들은 nav 와 main 태그들이다. 이들의 범위를 명확히하자 */ /* main태그 안에서도 메뉴 부문과 지도 부분을 명확히하자 */ body { height: 100vh; # 100vh = 100% of the viewport height } nav { height: 59px; } main { padding-top: 1.5rem; height: calc(100% - 59px); display: flex; flex-direction: column; } #map { flex-grow: 1; width: 100%; height: 100%; }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); //지도 생성 및 객체 리턴 # 출처: https://apis.map.kakao.com/web/guide/
'Projects > 맛집지도만들기' 카테고리의 다른 글
카카오맵API활용해보기 - 상세조회+유투브썸네일 (0) 2022.09.13 카카오맵API활용해보기 - 지도에 marker 찍기 (0) 2022.08.26 맛집지도 사이트 뼈대 만들기 (2) 2022.08.24
