[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
import { useEffect } from 'react';
const { kakao } = window;
const KakaoMap = () => {
useEffect(() => {
const container = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(37.55605010732486, 127.00496835047365),
level: 3,
};
const map = new kakao.maps.Map(container, options);
const markerPosition = new kakao.maps.LatLng(
37.55605010732486,
127.00496835047365,
);
const marker = new kakao.maps.Marker({
position: markerPosition,
});
marker.setMap(map);
map.relayout();
}, []);
return (
<div>
<div id='map' style={{ width: '500px', height: '500px' }}></div>
</div>
);
};
export default KakaoMap;
// KakaoMap.jsx
import KakaoMap from './KakaoMap';
import './MapModal.css';
const MapModal = () => {
return (
<div className='mapmodal-container relative flex justify-center'>
<div className='mapmodal-map w-full'>
<h1>지도</h1>
<div className='w-full'>
<KakaoMap />
</div>
</div>
</div>
);
};
export default MapModal;
// MapModal.jsx
다른 컴포넌트에서 작게 띄운 카카오맵을 클릭하면
MapModal이라는 모달창을 띄워 카카오맵을 크게 볼 수 있도록 하려고 했는데
다른 컴포넌트에선 카카오맵이 뜨는데 모달 창에서는 뜨지가 않아요… 그냥 하얀 창만 나와요
이 작은 지도를 클릭하면
이렇게 모달창이 뜨면서 큰 카카오맵이 뜨도록 하고 싶어요