본문 바로가기
개발자 전향 프로젝트

[API] 이보다 쉬울 수 없는 카카오 지도 적용법

by 샘오리 2022. 6. 11.

1.아래 사이트에 접속해서 우측 상단의 APP KEY 발급

https://apis.map.kakao.com/

2. 전체 애플리케이션에서 애플리케이션 추가

 

3. 추가 됐으면 클릭한 뒤 JavaScript 키를 따로 복사해둔다. 

4. 지도를 적용하고 싶은 html 소스코드로 가서 body 태그 안에 아래 코드를 복붙한다.

위에서 복사해둔 인증키를 아래 인증 KEY 넣는곳에 붙여넣는 것은 센스?

<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey='인증 KEY 넣는곳'"></script>
<script>
    var container = document.getElementById('map');
    var options = {
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 3
    };

    var map = new kakao.maps.Map(container, options);
</script>

5. 지도가 예쁘게 나온것을 확인한다.

6. 응용을 하고 싶다면 아래 샘플코드를 확인한다.

 

https://apis.map.kakao.com/web/sample/