[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
혹시나 문제해결에 도움이 될까 싶어서 코드도 첨부합니다.
import React, { useEffect } from ‘react’;
const KakaoMap = ({ theaters }) => {
useEffect(() => {
const script = document.createElement(‘script’);
script.src = //dapi.kakao.com/v2/maps/sdk.js?appkey=9f91d108b99f8d4b32be143b7a8ec3cb&autoload=false;
script.async = true;
document.head.appendChild(script);
script.onload = () => {
window.kakao.maps.load(() => {
const container = document.getElementById('map');
const options = {
center: new window.kakao.maps.LatLng(37.5665, 126.9780),
level: 3,
mapTypeId: window.kakao.maps.MapTypeId.ROADMAP, // 기본 ROADMAP 타입 사용
};
// 지도 생성
const map = new window.kakao.maps.Map(container, options);
// 타일 간 경계 문제 해결을 위한 오버레이 제거
map.removeOverlayMapTypeId(window.kakao.maps.MapTypeId.OVERLAY);
// 마커 설정 (기본 카카오 마커 사용)
theaters.forEach((theater) => {
if (theater.LC_LA && theater.LC_LO) {
const position = new window.kakao.maps.LatLng(theater.LC_LA, theater.LC_LO);
const brand = theater.POI_NM;
const marker = new window.kakao.maps.Marker({
map,
position,
title: `${brand} - ${theater.BHF_NM}`, // 마커에 지점명 표시
});
marker.setMap(map);
} else {
console.warn('위도와 경도가 없는 데이터:', theater);
}
});
// 지도 높이를 표의 높이에 맞추기
const adjustMapHeight = () => {
const cinemaSpotTitle = document.querySelector('.cinema-spot-title');
const tableContainer = document.querySelector('.table-container');
if (cinemaSpotTitle && tableContainer) {
const titleTop = cinemaSpotTitle.getBoundingClientRect().top;
const tableBottom = tableContainer.getBoundingClientRect().bottom;
const totalHeight = tableBottom - titleTop;
container.style.height = `${totalHeight}px`;
}
};
adjustMapHeight();
window.addEventListener('resize', adjustMapHeight);
return () => {
window.removeEventListener('resize', adjustMapHeight);
};
});
};
}, [theaters]);
return <div id=“map” style={{ width: ‘90%’, height: ‘500px’, margin: ‘20px auto’, borderRadius: ‘8px’, boxShadow: ‘0 4px 8px rgba(0, 0, 0, 0.1)’ }}>;
};
export default KakaoMap;