[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
호출을 했고 코드에 잘 넣었음에도 불구하고 지도가 보이지 않아요
개발자 도구 가서 호출 되는 것도 확인 했고 발급 키도 정상적으로 호출 되고 있음도 확인 했는데 지도가 kakaomap 워터마크만 나오고 배경이 안나옵니다. element로 마커도 불러오고 확대 축소도 되지만 지도 배경만 나오지 않는 상태입니다 왜 이러는 걸까요? 카카오 맵 사용하면서 처음 보는 현상 입니다. 설정하라는거 다 설정 했고 도매인설정에 카카오맵 사용자 설정도 다 해주었는데 안 나와요
사용하시는 앱ID 확인 부탁드립니다.
ID 1454412 입니다.
현재는 어제 비즈앱 신청 했고 승인이 난거 같은데 그래도 안 되네요…
import React, { useEffect, useRef } from ‘react’;
// const DEFAULT_LAT = 37.5665;
// const DEFUALT_LNG = 126.9780;
const KakaoMapPreview = () => {
console.log( import.meta.env.VITE_KAKAO_MAP_API_KEY);
const mapRef = useRef(null);
useEffect(() => {
const lat = 37.5665;
const lng = 126.9780;
const loadMap = () => {
if (!mapRef.current) return;
if (!window.kakao?.maps) return;
window.kakao.maps.load(() => {
const kakao = window.kakao;
const container = mapRef.current;
const options = {
center: new kakao.maps.LatLng(lat, lng),
level:3,
};
const map = new kakao.maps.Map(container, options);
new kakao.maps.Marker({
position: new kakao.maps.LatLng(lat, lng),
map,
});
});
};
if (window.kakao?.maps) {
loadMap();
return;
}
// const existingScript = document.querySelector('#kakao-map-script');
// if (existingScript) {
// existingScript.addEventListener('load', loadMap);
// return;
// }
// const script = document.createElement('script');
// script.id = 'kakao-map-script';
// // script.src = \`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${
// // import.meta.env.VITE_KAKAO_MAP_API_KEY
// // }&autoload=false\`;
// script.async = true;
// script.onload = loadMap;
// document.head.appendChild(script);
}, \[\]);
return (
<div ref={mapRef} className='preview-map' />
);
}
export default KakaoMapPreview; 이렇게 되어 있고
index.html에 스크립트 코드를 추가 해준 상태입니다. 그럼에도 불구하고 지도가 보이지 않습니다. 확대 축소된다고 로그는 찍히나 영원히 카카오맵 워터 마크만 뜨는 상태 입니다. 에러도 뜨지 않고요
지도 영역의 크기가 변할 때(예: 사이드바 펼침, 패널 토글 등) 동적으로 스타일이 변경되는 경우 발생하고 있는 것으로 보입니다.
컨테이너 크기가 변경된 직후 map.relayout() 을 호출해주세요.
https://apis.map.kakao.com/web/sample/mapRelayout/
https://apis.map.kakao.com/web/documentation/#Map_relayout
동일 합니다.