Kakao Maps API 사용 시 외부 서버 fetch 이후 지도 자체가 로딩되지 않는 문제 문의

카카오맵 API (지도/로컬)
1

안녕하세요 챗지피티로 api만드는 암것도 모르는 초보인데요 막히는게 많아서 조언을 부탁드립니다 아래는 챗지피티가 생성한 질문입니다 ㅠㅠ

본문:

안녕하세요,
외부 API 서버의 데이터를 활용해 Kakao 지도에 마커를 표시하는 프로젝트를 진행 중입니다.

현재 문제가 발생한 부분은 Kakao 지도 자체가 로딩되지 않는 현상입니다.
콘솔 로그상 fetch는 성공하거나, 경우에 따라 CORS 오류가 발생하기도 합니다.
하지만 가장 큰 문제는 지도 div 자체가 화면에 보이지 않고, Kakao Maps 객체가 생성되지 않는 점입니다.

환경 정보

외부 API 주소:
https://gangneung-lifesaver-api-vcj2.onrender.com/lifesavers

테스트 페이지:
https://gangneung-lifesaver-map.vercel.app

배포: Vercel

백엔드: FastAPI (CORS 허용: *)

프론트엔드에서 fetch()로 외부 API 호출 후 지도 생성

현재 HTML/JS 코드 예시

Kakao Map 테스트
const mapContainer = document.getElementById('map'); const mapOption = { center: new kakao.maps.LatLng(37.75, 128.9), level: 9, }; const map = new kakao.maps.Map(mapContainer, mapOption); 
  fetch("https://gangneung-lifesaver-api-vcj2.onrender.com/lifesavers")
    .then(response => response.json())
    .then(data => {
      data.forEach(item => {
        const markerPosition = new kakao.maps.LatLng(item.lat, item.lng);
        new kakao.maps.Marker({
          position: markerPosition,
          map: map,
        });
      });
    })
    .catch(error => {
      console.error("데이터 불러오기 실패:", error);
    });
</script>

문제 요약

지도 객체(kakao.maps.Map)가 생성되지 않음 → 지도가 전혀 화면에 출력되지 않음

kakao maps sdk가 로딩되었는지 불확실

콘솔 오류는 CORS 또는 CSP 관련 메시지일 수 있음

외부 API 요청만 해도 Kakao Maps가 같이 로딩 실패하는 이유를 파악하고 싶음

혹시 외부 API 호출이 Kakao Maps의 로딩에 영향을 줄 수 있는지,
또는 CSP / 리퍼러 정책 등 Kakao Maps SDK 사용 시 주의할 점이 있다면 안내 부탁드립니다.

감사합니다.

2

테스트 페이지가 접속이 안되서 첨부 코드로만 확인해본 결과 다른 오류는 발견하지 못했습니다.
다만, 마커가 생성되지 않아서 data 리스트 정보를 보니 마커 위치 LatLng 생성 시 데이터 속성값이 잘못 선언되어있어서
아래와 같이 변경하고 정상 동작을 확인했습니다.

//수정한 부분
const markerPosition = new kakao.maps.LatLng(item.lat, item.lng); (X)
const markerPosition = new kakao.maps.LatLng(item.lat, item.lon);(O)

아래 코드도 함께 참고 부탁드립니다.
그리고 지도 SDK가 로딩되었는지 확인하는 방법은 network 탭에서 확인하실 수 있습니다.

<body>
    <div id="map" style="width:100%;height: 500px;"></div>
</body>

const mapContainer = document.getElementById('map'); 
const mapOption = { center: new kakao.maps.LatLng(37.75, 128.9), level: 9, }; 
const map = new kakao.maps.Map(mapContainer, mapOption);

fetch("https://gangneung-lifesaver-api-vcj2.onrender.com/lifesavers").then(response => response.json())
.then(data => {
    data.forEach(item => {
        const markerPosition = new kakao.maps.LatLng(item.lat, item.lon);

        new kakao.maps.Marker({
            position: markerPosition,
            map: map
        });            
    });
})
.catch(error => {
    console.error("데이터 불러오기 실패:", error);
});
3

와우 전 이해못했지만 챗지피티가 알아먹었데요 감사합니다

4

지도호출하니까 이젠 json이 호출되던게 안되네요 ㅠㅠ 제 main.py 는 이렇습니다
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.staticfiles import StaticFiles
import json
import os

app = FastAPI()

CORS 설정

app.add_middleware(
CORSMiddleware,
allow_origins=[““],
allow_credentials=True,
allow_methods=[””],
allow_headers=[“*”],
)

정적 파일 서빙 경로 등록

app.mount(“/”, StaticFiles(directory=“public”, html=True), name=“static”)

JSON 데이터 로드

DATA_FILE = os.path.join(os.path.dirname(file), “nationwide_lifesavers_coordinates_only.json”)
with open(DATA_FILE, “r”, encoding=“utf-8”) as f:
lifesavers = json.load(f)

@app.get(“/lifesavers”)
def get_lifesavers():
return lifesavers

5

로컬 경로의 JSON 파일이 로드되지 않는 경우, 경로 설정 문제일 수 있습니다.
파일 로드 시 발생하는 오류 메시지를 참고하셔서 문제를 해결해 주세요,
그리고 문의 내용은 지도 API와 직접 연관된 이슈가 아니기 때문에 자세한 답변이 어려운 점 양해 부탁드립니다.