web

[KakaoMapAPI] 지도에 마커 생성하기 본문

API

[KakaoMapAPI] 지도에 마커 생성하기

사용자 원동호 2020. 12. 3. 09:23
728x90
반응형

지도에 마커를 하나 생성하는 기본적인 예제이다.

 

<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: 5
        };

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


    // 마커가 표시될 위치.
    let markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

    // 마커를 생성.
    let marker = new kakao.maps.Marker({
        position: markerPosition
    });

    // 마커를 해당 위치에 설정
    marker.setMap(map);
</script>

 

 

정말 기본적인 예제라 금방 따라 할 수 있다!

 

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

728x90
반응형
0 Comments
댓글쓰기 폼