인프런 커뮤니티 질문&답변

작성한 질문수

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

카카오맵 API를 활용해서 지도를 넣는 방법

카카오맵이 안나오네요 ㅠ

작성

·

5.5K

0

<!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="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
    />
    <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 id="map" style="width:500px;height:400px;"></div>

      <!-- 카카오지도 -->
    </main>

    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=255a8bb0fae5a9f20c5b7df1887f1029"
    ></script>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey= e96c37c522d07f084c9e4130c65b6a7f."></script>
  <script src="main.js"></script>
</body>
</html>
 
/*
**********************************************************
1. 지도 생성 & 확대 축소 컨트롤러
https://apis.map.kakao.com/web/sample/addMapControl/

*/

var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
var options = {
  //지도를 생성할 때 필요한 기본 옵션
  center: new kakao.maps.LatLng(37.54, 126.96), //지도의 중심좌표. 서울 한가운데
  level: 8, //지도의 레벨(확대, 축소 정도) 3에서 8레벨로 확대
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

// 지도에 확대 축소 컨트롤을 생성
let zoomControl = new kakao.maps.ZoomControl();

// 지도의 우측에 확대 축소 컨트롤을 추가
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
 

javascript aws mysql HTML/CSS github git rest-api

답변 11

1

질문자

api주소 다시넣고 해보니까 잘나오네요 감사해요

지식공유자

api키를 새로 받으신건가요?

해결됐다니 다행이네요 ㅠㅠ ㅎㅎ

고생 많으셨습니다!

0

콘솔캐쳐요~

0

지식공유자

제 환경에서는 정상적인걸로 보아

카카오맵 API 플랫폼 등록에서 설정한 도메인에는

http://127.0.0.1:5500 (라이브서버경로)으로 하신 것으로 추정됩니다.

지금 테스트하고 계신 주소가 http://127.0.0.1:5500 이 맞는지 확인해보시면 좋을 것 같습니다.

일반 디폴트 웹브라우저에서 테스트하면 http://127.0.0.1으로,

이렇게 포트번호가 다르기 때문에

카카오맵 서버측에서 요청을 거부하게됩니다.

따라서 지금 라이브서버로 해당 파일을 조회해보시면 해결될 것 같습니다.

0

다시올렸습니다.
지도가 안떠유~

지식공유자

안녕하세요.

올리신 코드 그대로 제 컴퓨터에서 테스트해보니 정상적으로 출력되고 있는 것을 확인했습니다.

이런 경우엔 대부분 로컬 환경 캐시나 오타 등 사소한 문제일 가능성이 큽니다.

1. 웹브라우저 캐시 날리기 => shift + f5

2. 다른 웹브라우저로 접속해보기

3. 파일명 오타 체크, 연결 확인하기

4. 다른 api키 발급받기

기본적으로 위 4가지 테스트를 해보시고,

그래도 안된다면 콘솔창에 에러를 함께 살펴보고 문제를 해결해보면 될 것 같습니다.

감사합니다.

0

<!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="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
    />
    <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 id="map" style="width:500px;height:400px;"></div>
      <!-- 카카오지도 -->
    </main>
 
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=72d6ff41fb27c75f787a525a899ae8ce"></script>
    <script src="script.js"></script>
  </body>
</html>
 
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); //지도 생성 및 객체 리턴
 
 

0

지식공유자

제 환경에서 보내주신 코드 그대로 테스트해보니 문제 없이 잘 출력됩니다.

이 경우엔 로컬 문제인 것 같아요!

웹브라우저 캐시를 날려서 새로고침 해봅시다!

shift + f5 를 통해 새로고침 해보시고,

다른 웹브라우저로 127.0.0.1:5500에 접근해보시겠나요??

0

질문자

0

질문자

<!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">
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=e96c37c522d07f084c9e4130c65b6a7f"></script>
    <title>Document</title>
    <link type="main.css" href="main.css">
</head>
<body>
    <div id="map" style="width:100%;height:350px;"></div>
   <script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
    level: 3 // 지도의 확대 레벨
    };
    var map = new kakao.maps.Map(mapContainer, mapOption);
    </script>
    <script src="main.js"></script>
</body>
</html>
 
 
#map{
    width:500px;
    height: 400px;
}
 
js 파일은 없어요 다 script로 들어간듯하네요

0

질문자

지식공유자

딱 지금 상태에서 html, css, js 파일 모두 보여주시고

지금 웹 브라우저 주소창까지 보이게 해서 보여주세요!

0

질문자

<!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="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
    />
    <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 id="map" class="inner"></div>

      <!-- 카카오지도 -->
    </main>

    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=e96c37c522d07f084c9e4130c65b6a7f"
    ></script>
    <script src="main.js"></script>
  </body>
</html>

질문자

질문자

api도 정확하게 입력한듯한데요 왜 오류가 나올까요 ㅠ

지식공유자

이건 에러가 아니라 경고 메세지입니다!

이 부분에서

이런식으로 css 속성이 지워져있네요! CSS 파일 분리하셔서 별도로 작성하셨나요?

질문자

질문자

입력했는데도 안나오네요

0

지식공유자

안녕하세요!

앞으로 개발하며 문제가 생기는 경우엔, 우선 개발자도구 (F12)에 콘솔 탭에 어떤 에러 메세지가 뜨는지 보시면

지금 문제가 어떤 것인지 쉽게 파악할 수 있습니다.

우선 제가 코드를 봤을 때 문제되는 부분을 추측해보면,

HTML 코드에 script 태그 부분에 보시면, 제가 강의자료에 사용했던 부분 밑에 코드가 똑같이 중복되어서 발생하는 문제가 아닐까 생각합니다.

개발자 도구에선 아마 Unauthorized 관련 에러가 뜨지 않을까 싶습니다!

(이 부분)

그래서 중복되는 코드를 제거하고 본인의 api키가 있는 script 태그만 남기고,

혹시 그래도 나타나지 않으신다면

카카오맵 API 설정에서 웹 플랫폼 url이 라이브서버(http://127.0.0.1:5500)으로 설정되어 있는지 확인해보시면 될 것 같습니다.

혹시 해결되지 않는다면 개발자도구 콘솔 에러 메세지를 캡쳐해서 보여주시면 감사하겠습니다.

감사합니다!

작성한 질문수