React에서 Kakao 지도 api 사용하기 - 지도에 표시하기

1. 지도에서 좌표-주소 변환

geocoder 라는 것을 사용해야하는데, services라이브러리를 써야합니다. 라이브러리는 api 요청할 때 url에 추가해서 보내면 됩니다. (kakao 예제에서 제공하는 cluster, drawing도 함께 추가해 넣었습니다.)

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내api키&libraries=services,clusterer,drawing"></script>

 

2. 우선 화면에 무언가 표시를 해봅시다.

예제는 kakao에서 제공되는 kakao 제주 사옥을 찾는 것 같습니다.

</src/container/MapContainer.js>

import React, { useEffect } from 'react';

const { kakao } = window;

const MapContainer = () => {

  useEffect(() => {
    const container = document.getElementById('myMap');
    const options = {
      center: new kakao.maps.LatLng(35.12, 129.1),
      level: 3
    };
    // 지도를 생성합니다.
    const map = new kakao.maps.Map(container, options);
    // 주소-좌표 변환 객체를 생성합니다.
    const geocoder = new kakao.maps.services.Geocoder();
    // 주소로 좌표를 검색합니다..
    geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function (result, status) {

      // 정상적으로 검색이 완료됐으면 
      if (status === kakao.maps.services.Status.OK) {
  
        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
  
        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
          map: map,
          position: coords
        });
  
        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
          content: '<div style="width:150px;color:red;text-align:center;padding:6px 0;">내가 썼지롱</div>'
        });
        infowindow.open(map, marker);
  
        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
      }
    })
  }, []);

  return (
    <div id='myMap' style={{
      width: '800px', 
      height: '800px'
    }}></div>
  );
}

export default MapContainer;

<결과>

아직 기능들을 알 수는 없지만, 뭔가 써집니다.