API

[KakaoMapAPI] 웹 페이지에 지도 표시하기

원동호 2020. 12. 3. 09:14
반응형

지도를 표시하는 가장 기본적인 예제이다.

 

HTML + JAVASCRIPT로 구성할 수 있다.

 

test.html

<html>
    <head>
        <meta charset="utf-8">
        <title>지도 생성하기</title>
        <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은Key값"></script>
        
    </head>

    <body>
        <!-- 지도를 표시할 div -->
        <div id="map" style="width:40%;height:600px;"></div>
    </body>
</html>

<script>
    // 지도를 표시할 div 
    let mapContainer = document.getElementById('map'),
        mapOption = { 
            // 지도의 중심좌표
            center: new kakao.maps.LatLng(33.450701, 126.570667), 
            // 지도의 확대 레벨(1~14) 값이 클 수록 지도가 축소 되어 보임.
            level: 2
        };

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

 

아주 간단하게 지도를 그릴 수 있다.

 

아래는 확대 레벨별 지도다.

 

level : 5
level : 10

레벨 값이 커질 수록 지도가 축소되어 지는 걸 확인 할 수 있다.

 

도움이 되셨다면 하트 및 댓글 부탁드립니다♥

반응형
저작자표시 (새창열림)