Next.js에서 카카오 지도를 연동해 현재 위치와 마커 표시하기

프로젝트를 진행하면서 사용자 주변 치과를 지도에서 확인할 수 있는 기능이 필요해 카카오 지도를 연동하게 되었다.
이번 글에서는 카카오 지도를 연동하고 현재 위치를 기반으로 치과 정보를 표시한 과정을 정리해보려고 한다.

카카오 지도 연동

카카오 지도를 사용하기 위해 먼저 JavaScript 키를 발급받고 SDK를 연동했다.

Next.js에서는 window 객체를 바로 사용할 수 없어 SDK를 동적으로 불러오는 방식으로 적용했다.

const script = document.createElement("script");
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${kakaoMapKey}&autoload=false`;
document.head.appendChild(script);

처음에는 지도가 보이지 않아 SDK 문제인 줄 알았는데, JavaScript 키와 SDK 로드 여부를 확인하고 카카오 플랫폼 설정도 함께 점검해봤지만 문제가 계속 발생했다.

이후 SDK를 불러오는 부분을 다시 확인하던 중 추가했던 script.crossOrigin = "anonymous" 설정을 제거하니 정상적으로 지도가 표시되었다.

---

현재 위치 기반 지도 표시

단순히 지도를 보여주는 것보다 사용자 주변 치과를 함께 보여주는 것이 목적이었기 때문에 현재 위치 정보를 먼저 가져왔다.

브라우저에서 제공하는 Geolocation API를 사용해 현재 위치 좌표를 조회했다.

navigator.geolocation.getCurrentPosition(...)

// 현재 위치를 지도 중심으로 설정
const center = new window.kakao.maps.LatLng(
  latitude,
  longitude
);

---

치과 데이터 마커 표시

주변 치과 조회 API에서 위도와 경도 정보를 함께 받아 지도에 마커를 표시했다.

const marker = new window.kakao.maps.Marker({
  position: markerPosition,
  map,
});

처음에는 기본 마커를 사용했지만 프로젝트와 조금 더 어울리는 형태로 보여주고 싶어 커스텀 마커를 적용했다.
현재 위치와 치과를 구분할 수 있도록 각각 다른 커스텀 마커를 적용했다.

const currentMarkerImage = new window.kakao.maps.MarkerImage(
  "/images/map/currentMarker.png",
  ...
);

const dentalMarkerImage = new window.kakao.maps.MarkerImage(
  "/images/map/dentalMarker.png",
  ...
);

---

마커 클릭 시 병원 정보 표시

마커만 표시하면 어떤 병원인지 확인하기 어려워 인포윈도우를 추가해 병원명과 주소를 확인할 수 있도록 구현했다.

const infoWindow = new window.kakao.maps.InfoWindow({
  content: "...",
});

다른 마커를 클릭하면 기존 인포윈도우가 닫히고 새로 열리도록 처리했고, 지도 빈 영역을 클릭하면 열려 있는 인포윈도우가 닫히도록 구현했다.

---

지도 범위 자동 조정

처음에는 현재 위치를 중심으로 지도를 보여주도록 구현했다.

하지만 치과 위치에 따라 일부 마커가 화면 밖으로 벗어나는 경우가 있어 현재 위치와 치과 위치를 모두 포함하는 범위를 계산하도록 수정했다.

// 현재 위치와 치과 위치를 모두 포함하는 범위 생성
const bounds = new window.kakao.maps.LatLngBounds();
bounds.extend(currentPosition);
bounds.extend(markerPosition);
map.setBounds(bounds);

---

마무리

이번에는 카카오 지도를 연동하고 현재 위치 표시, 마커, 인포윈도우, 지도 범위 조정 기능까지 구현했다.
이후에는 지역 검색 결과에 따라 지도 위치를 이동시키거나 리스트와 지도를 연동하는 기능도 추가해볼 예정이다.