[Javascript] 카카오 API - 지도

카카오 API로 카카오맵을 사용하기

 

https://developers.kakao.com/

Kakao Developers

에 접속해 카카오 애플리케이션을 만들고AppKey를 발급받는다.

 

HTML 원하는 곳에 지도 div태그를 넣고

<div id="map" style="width:500px;height:400px;"></div>

자바스크립트에는

let container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    let options = { //지도를 생성할 때 필요한 기본 옵션
      center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
      level: 3 //지도의 레벨(확대, 축소 정도)
    };

    let map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

를 작성하면 기본적인 지도를 띄울 수 있다.

 

여기서 원하는 위도, 걍도에 마커를 입력하게 하고 싶다면...

// 마커가 표시될 위치입니다 
      var markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); // 마커의 위치를 수동으로 위도, 경도로 작성함

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

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

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

를 작성하여 마커를 찍을 수 있다.

더 다양한 기능은 아래 문서에서 확인할 수 있다.

 

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