작성
·
86
0
https://webflow.com/made-in-webflow/website/naver-map-api-showcase
안녕하세요. 예전에 장피엠님이올려주신 네이버지도 api를 수정하여 활용하려 했는데,
링크가 안들어가져서 질문남깁니다ㅠㅠ
방법이라도 알려주실 수있으실까요?
네이버 콘솔- 제공 코드에 client ID 제걸로 수정 - webflow에서 embed 에 코드 삽입하였는데 구현이 안됩니다.
아래는 제가 사용한코드입니다.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=클라이언트아이디입력"></script>
</head>
<body>
<div id="map" style="width:100%;height:100vh;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions); // id와 option
</script>
</body>
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
장피엠님께서 질문하신 네이버 지도 API 구현문제와 관련하여 안내를 드리자면, 제공하신 코드만으로는 구체적인 문제를 파악하기 어렵지만, 네이버 지도 API 구현 과정에서 몇 가지 일반적인 오류 가능성을 살펴보겠습니다.
클라이언트 ID 확인: 사용하신 ncpClientId=클라이언트아이디입력
부분에서 실제 클라이언트 ID로 잘 변경하였는지 확인하세요. 클라이언트 ID가 잘못되었거나 오타가 있는 경우 API 사용에 실패할 수 있습니다.
도메인 설정: 네이버 Cloud Platform에서 지도 API 사용 신청 시 등록한 도메인과 실제 웹페이지가 호스팅되는 도메인이 일치하는지 확인하세요. 도메인 불일치 시 지도 API가 정상 작동하지 않을 수 있습니다.
HTTPS 사용 여부: 최근 대부분의 웹 서비스에서는 보안을 위해 HTTPS를 요구합니다. 사용하시는 웹사이트가 HTTPS를 사용하고 있는지 확인해보세요. HTTP만 지원하는 경우 지도가 정상적으로 로드되지 않을 수 있습니다.
웹 콘솔의 오류 메시지: 웹브라우저의 개발자 도구(Console 탭)를 열어보시고, 네이버 지도 API 관련해서 특정 오류 메시지가 있는지 확인해보세요. 오류 메시지를 통해 구체적인 문제를 파악할 수 있습니다.
CORS(Cross-Origin Resource Sharing) 문제: 클라이언트 사이드에서 API를 호출할 때 CORS 정책에 의해 차단되는 경우가 있습니다. 이는 서버 설정을 통해 해결할 수 있으나, 로컬 환경이나 일부 특정 환경에서 발생할 수 있는 문제입니다.
이 중 문제 해결에 도움이 되는 사항이 없다면, 네이버 지도 API 관련 공식 문서나 커뮤니티, FAQ 등을 참고하여 추가적인 해결 방법을 찾는 것도 좋은 방법입니다.
제공된 정보 외의 추가적인 질문이나 상황 설명이 없어 구체적인 해결 방법을 제시하기는 어렵지만, 위의 기본적인 점검 사항들을 확인해보시고, 문제가 지속된다면 네이버 지도 API 고객지원 또는 웹플로우 커뮤니티에 직접 문의해보는 것도 좋은 방법일 것입니다.