카카오 지도 Web API 사용해보기

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

https://react-kakao-maps-sdk.jaeseokim.dev/

 

1. index.html에 카카오 API 코드를 복붙한다

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
></script>

 

2. map.js에 지도를 담을 영역을 만든다

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

 

3. 지도를 띄우는 코드를 작성한다

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

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

 

지도 생성!