지도 api를 이용해서 표출 하는 과정에 있는데, 스카이뷰 버튼이 꺠지는 문제가 있습니다. 어떻게 해결 해야 하나요?
api코드를 그대로 복사 하고 붙여 두었는데, 여기 부분만 문제가 있네요, 다른 css는 적용하지도 않았습니다.
import { useEffect } from 'react';
import styled from 'styled-components';
const test = () => {
useEffect(() => {
// Kakao 지도 생성
const mapContainer = document.getElementById('map'); // 지도를 표시할 div
const mapOption = {
center: new window.kakao.maps.LatLng(
mainCoordination[0].lat,
mainCoordination[0].lng,
), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
};
const map = new window.kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
const mapTypeControl = new window.kakao.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, window.kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
const zoomControl = new window.kakao.maps.ZoomControl();
map.addControl(zoomControl, window.kakao.maps.ControlPosition.RIGHT);
}, []);
return <div id="map" />;
};
const test = styled.div`
width: 100%;
height: 500px;
`;
export default test;
코드는 다음과 같습니다.
