수강 완료 후 개인작업 질문-카카오맵 API 사용

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

수강 완료 후 개인작업 질문-카카오맵 API 사용

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0

기타

배*영

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

안녕하세요! 웹개발 A to Z 강의를 완강하고 애매모호했던 개념을 조금이나마 이해한 뒤

만들어보고싶었던게 있어서 이제 해보려고하는데 처음부터 막혀버렸네요.

제가 생각하는 서비스는 지도가 중심인데요.

카카오맵 API를 사용하려고 가입-어플리케이션 추가-앱키 생성까지 완료해서

코드를 넣었는데 지도가 뜨지 않아서요.

카카오맵API에서 예제코드까지 제시해주기 때문에 예시에서 제시한 자리에 앱키만 복사해서 붙여넣으면 안될 이유가 없는 것 같은데..

인터넷이아니라 로컬에서 실행되기 때문에 지도가 안뜨는건지 어떤 설정을 해줘야하는지 혹시 제가 놓친 부분을 아시면 알려주시면 감사하겟습니다 ㅠ

작성한 코드 및 에러 메세지

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

카카오맵 API 지도 생성 예제 소스

'발급받은 APPKEY를 사용하세요' 부분에 발급받은 APP KEY를 넣어도 지도 생성되지않음

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>지도 생성하기</title>
    
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 
</script>
</body>
</html>

댓글 알림