네이버 지도(naver map API) 웹페이지에 구현하기

네이버 MAP API를 사용하면 단순이 그림만 제공하는 지도가 아니라 다양한 효과와 편의 기능을 제공할 수 있다.

우선 아래 링크를 통해 NAVER map Api v3를 사용하기 위해 개발자로 등록한다.

https://developers.naver.com/main/

[ Maps 아이콘 클릭 ]

[ 오픈 API 이용 신청 클릭 ]

오픈 API  이용 신청 : 휴대폰 인증, 이메일 인증, 회사명(가상도 가능) 입력후 신청하기

애플리케이션 이름에서 적당한 이름을 입력하고,  사용API에서 지도(웹)을 선택한다.

Web 설정에 가서 해당 지도를 어느 사이트에서 사용할것인지 지정해야 한다.

애플리케이션 등록하기 / 비로그인 오픈 API / Web  설정 선택

웹서비스 URL 입력 http://주소를 입력

지도가 나올 웹사이트의 주소를 정확히 입력한다.

하단 메뉴중/ 내 어플리케이션

개요 부분의 지도 WEB API 가이드 부분은 script를 복사하고 지도가 출력하고자 하는 html  상단에 추가한다.

<div id="map" class="map"> </div> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=자동으로 생성되는코드&submodules=geocoder"></script> <script> var CustomOverlay = function(options) {

지도 weB api 가이드 밑에 가이드 링크를 클릭하여 지도 샘플을 확인한다.

JavaScript v3 클릭

네이버 지도 API V3 사이트 바로가기

네이버 지도 API V3 사이트 바로가기

원하는 예제 선택 (정보창 표시하기 선택)

박스 안의 모든 스크립트 코드를 복사

[ HTML ]

호스팅 서버에 올리고 지도가 나오는지 확인한다.