맛집을 검색하거나, 여행을 갈때, 어떠한 위치를 찾을때 지도가 나오는경우가 많다.
내가 검색한 주소에 대한 위치를 표시해서 보여주고 싶을때는 지도 라이브러리를 사용해야 하는데 크게 3가지 라이브러리가 있다.
1.구글 라이브러리
2.네이버 라이브러리
3.카카오 라이브러리
이중에서 가장 적합한 라이브러리를 사용하면 된다.
지도 라이브러리는 호출 횟수에 따라서 과금이 부과되는 경우가 많기때문에 무료횟수가 가장 많은 카카오 지도 라이브러리로 사용해보자.
카카오 지도 적용하기
카카오 지도를 사용하기 위해서는 카카오개발자 홈페이지에 가입 후 javascript key 값을 받고, 홈페이지를 등록하는등의 과정이 필요하기에 이부분은 설정후 진행하도록 한다.
기본설정이 완료된 후 카카오 페이지 가이드 문서에 따라 진행해야 한다.
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); //지도 생성 및 객체 리턴이문서를 보면 Next.js 에서 바로 작성하기는 어려운 날것 그대로의 javascript 코드이기 때문에 변환을 해줘야 한다.
import Head from 'next/head';먼저 script로 카카오 지도를 불러와야 하기 때문에 Head 태그를 import 해준다.
Head 태그를 import 후 return 부분에 카카오맵 스크립트를 호출할수 있는 코드를 추가하면 카카오맵을 불러오기가 가능해진다.
return(
<Head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey='JavaScript 앱 키 입력'">
</script>
</Head>
)Javascript 앱 키 부분에는 카카오맵 개발자 홈페이지에 있는 본인의 키값을 넣어주면 된다.
ReactQuill과 같이 바로 불러온다면 document is undefined 라는 서버에러가 나오기 때문에 위에내용들을 합쳐서 useEffect에 넣어주면 문제를 해결할수 있다.
useEffect(() => {
const script = document.createElement("script");
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=a0290023f3c59e26ad85f5ea9165188f";
document.head.appendChild(script);
}))document.head.appendchild는 head 태그에 script 파일을 넣는다는 의미이다. 그렇게 되면 카카오지도를 호출하는 페이지에서만 head 태그에 넣어줄수 있다.
카카오맵 전체코드(보여지는 페이지)
// import Head from "next/head"; import { useEffect } from "react"; declare const window: typeof globalThis & { kakao: any; }; export default function KakaoMapPage() { useEffect(() => { const script = document.createElement("script"); script.src = "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=a0290023f3c59e26ad85f5ea9165188f"; document.head.appendChild(script); script.onload = () => { window.kakao.maps.load(function () { const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new window.kakao.maps.Map(container, options); console.log(map); const marker = new window.kakao.maps.Marker({ // 지도 중심좌표에 마커를 생성합니다 position: map.getCenter(), }); // 지도에 마커를 표시합니다 marker.setMap(map); interface IMouseEvent { latLng: any; } // 지도에 클릭 이벤트를 등록합니다 // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다 window.kakao.maps.event.addListener( map, "click", function (mouseEvent: IMouseEvent) { // 클릭한 위도, 경도 정보를 가져옵니다 const latlng = mouseEvent.latLng; // 마커 위치를 클릭한 위치로 옮깁니다 marker.setPosition(latlng); // var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, '; // message += '경도는 ' + latlng.getLng() + ' 입니다'; // var resultDiv = document.getElementById('clickLatlng'); // resultDiv.innerHTML = message; } ); }); }; }, []); return ( <> <div id="map" style={{ width: "500px", height: "400px" }}></div> </> ); }
위 코드는 내가 클릭한 곳에 마커를 찍고 그 위치를 보여주는 페이지 이다.
추가적으로 찍은 마커의 경도, 위도값, 주소값등을 불러올수도 있다.
아래 페이지에서 상세하게 설명되어 있으니 몇가지 더 적용해 봐야할것 같다.
