안녕하세요. NAVER Maps JavaScript API v3를 사용 중인데 특정 환경에서만 발생하는 오류가 있어 문의드립니다.
Issue와 실제 코드를 기반으로 AI가 작성 후 내용검수를 하였습니다. 어색한 부분이 있으면 양해 부탁드립니다.
[증상]
네이버 지도 초기화 시 TypeError: Cannot read properties of undefined (reading 'projection') 오류가 환경에 따라 간헐적으로 발생합니다.
- macOS Chrome: 처음 발생 후 현재는 정상 동작
- iOS WebView (iOS 26.1): 간헐적 오류 발생
- Staging 환경: 지속적으로 에러 발생
- Production 환경: 동일 기기, 동일 iOS 버전에서 정상 작동
- 재현성: 동일 코드에서도 발생할 때가 있고 안 할 때도 있음 (예측 불가)
[에러 로그]
네이버 지도 초기화 중 오류: TypeError: Cannot read properties of undefined (reading 'projection')
at new x.MapOptions (maps.js?ncpKeyId=xxxxx&submodules=panorama:11:13158)
at x.Map._initMapOptions (maps.js?ncpKeyId=xxxxx&submodules=panorama:11:22770)
at new x.Map (maps.js?ncpKeyId=xxxxx&submodules=panorama:11:15892)
at initializeMap (naver-map.vue:1856:11)
[환경 정보]
- SDK 버전: NAVER Maps JavaScript API v3
- 스크립트 URL: https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=xxxxx&submodules=panorama
- 프레임워크: Vue 3 + Quasar (TypeScript)
- 문제 발생 환경: iOS 26.1 WebView, macOS Chrome (간헐적)
[관련 코드]
(스크립트 로드)
const createScript = (resolve, reject) => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = `https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=${NAVER_MAP_CLIENT_ID}&submodules=panorama`;
script.async = true;
script.onload = () => {
resolve();
};
document.head.appendChild(script);
};
(지도 초기화)
const initializeMap = () => {
try {
if (!naver || !naver.maps) {
throw new Error('네이버 지도 API가 로드되지 않았습니다.');
}
if (!naverMapRef.value) {
throw new Error('지도 컨테이너 DOM 요소를 찾을 수 없습니다.');
}
const mapOptions = {
center: base,
draggable: draggable,
zoom: zoom,
minZoom: minZoom,
maxZoom: maxZoom,
padding: padding,
zoomControl: zoomControl,
zoomControlOptions: {
style: naver.maps.ZoomControlStyle.LARGE,
position: naver.maps.Position.RIGHT_CENTER,
},
mapTypeId: naver.maps.MapTypeId.NORMAL,
mapTypeControl: mapTypeControl,
mapTypeControlOptions: {
mapTypeIds: ['normal', 'terrain'],
style: naver.maps.MapTypeControlStyle.DROPDOWN,
position: naver.maps.Position.TOP_RIGHT,
},
mapDataControl: false,
};
map = new naver.maps.Map(naverMapRef.value, mapOptions);
} catch (error) {
logger.error('네이버 지도 초기화 중 오류:', error);
}
};
[재현 단계]
1. 지도 컴포넌트 마운트
2. loadNaverMapScript() 호출 → 스크립트 로드 완료
3. initializeMap() 호출 → new naver.maps.Map() 실행
4. SDK 내부 MapOptions 생성 과정에서 projection 속성 접근 시 undefined 오류
[참고: 유사 사례]
[topic/412] map panorama 생성시 오류가 발생합니다
- https://www.ncloud-forums.com/topic/412/
- 동일한 패턴: 간헐적 오류 발생
- "같은 위치라도 에러가 발생할 때도 있고 발생하지 않을 때도 있었습니다"
- 우회 해결: "파노라마 맵을 초기에 로드하여 보이지 않는 상태로 놔둔 후..." 방식
[질문]
1. SDK 내부에서 projection이 undefined가 되는 조건이 있을까요? (예: WebGL 미지원, 특정 iOS 버전 등)
2. iOS WebView 환경에서 권장되는 초기화 방식이 별도로 있을까요?
감사합니다.
