네이버 지도API 개발가이드를 학습시켜서 원하는 지도 형식의 코드를 만들어 웹페이지에 임베드하는 과정입니다.
프레이머로 웹페이지를 제작했고, 일잘러 장피엠 장병준님이 많은 도움주셨습니다.
1. 준비
GPT ADA > Link Reader 플러그인
웹 빌더 : Framer
튜토리얼
Geocoder 서브 모듈
주소→좌표 검색(geocode) / 좌표→주소 검색(reversegeocode) API를 호출
Naver Map API > Client ID
가입 후, 결제 수단 등록
무료 이용량은 ‘대표계정’ 1개에 한해 제공
AI∙NAVER API > Application 등록 > 인증정보 > Client ID 복사
Application 이름
서비스 체크 : Naver Maps > Web Dynamic Map / Geocoding
Web 서비스 URL
2. GPT가 만든 코드를 Framer에 입력
Naver Map API 개발 가이드 학습
코드에 Client ID와 주소 입력
Client ID
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=geocoder"></script>
주소
geocodeAddress('불정로 6')
Framer에 코드 넣기
임베드가 잘 안될 때, 프롬프트로 수정요청
‘정상 작동 안되는데 오류 수정해줘! ’
원하는 지도 형식의 프롬프트 입력
1. 마커만 생성
2. 마커 클릭 시, 인포윈도우 생성(주소 포함)
‘마커를 클릭할 때, 주소를 포함한 인포윈도우를 생성하게 해줘.’
3. 마커와 인포윈도우 기본 생성(주소 포함)
‘기본적으로 지도에 마커와 주소를 포함한 인포윈도우를 생성해줘’
4. 마커와 인포윈도우 기본 생성(주소 포함) + 마커 클릭 시, 해당 주소의 네이버 지도 웹/앱으로 이동
‘기본적으로 지도에 마커와 주소를 포함한 인포윈도우를 생성해주고, 마커를 클릭하면 해당 주소의 네이버 지도 웹페이지로 이동하게 만들어줘. 그리고 인포윈도우 안에 들어갈 주소는 볼드체로 만들어줘’
5. 마커와 인포 윈도우 기본 생성(지명/주소/대표 이미지) → ‘실패’