본문 바로가기
javascript

kakao 지도 api (마커 + 컨트롤 추가)

by 바나냥 2020. 4. 17.
<div id="map" class="map"></div> 
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값"></script> 
<script> 
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = {  
        center: new kakao.maps.LatLng(38.0099423, 126.95151742), // 지도의 중심좌표 
        level: 6 // 지도의 확대 레벨 (레벨 클수록 축소)
    }; 

    var map = new kakao.maps.Map(mapContainer, mapOption);  // 지도를 생성합니다 

    // 마커가 표시될 위치입니다 
    var markerPosition  = new kakao.maps.LatLng(38.0099423, 126.95151742); 

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

    // 마커가 지도 위에 표시되도록 설정합니다
    marker.setMap(map);

    // 아래 코드는 지도 위의 마커를 제거하는 코드입니다
    // marker.setMap(null);    

    // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
    var mapTypeControl = new kakao.maps.MapTypeControl();

    // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
    // kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
    map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

    // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
    var zoomControl = new kakao.maps.ZoomControl();
    map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
</script>

댓글