본문 바로가기

개발

[Javascript] 네이버 JavaScript 2.0 지도 사용


프로젝트 진행중 지도를 사용할 일이 생겨서 정리해둔다.


네이버 오픈API중 지도API를 사용할 것이다.


NAVER 개발자센터 오픈 API : http://developer.naver.com/wiki/pages/OpenAPI

(네이버 로그인 필요)


오픈API 탭으로 이동해서 키발급 버튼을 클릭하면 아래 이미지처럼 키를 발급 받을 수 있는 화면이 나온다.

(UI는 변경될 수 있음)


웹을 선택한후 URL을 입력한다.

로컬 테스트용이기때문에 localhost로 입력했다.






키 발급이 완료되면 아래 이미지처럼 발급키가 부여된다.



자, 이제 테스트를 위해 소스를 내려받자.

사이드 메뉴에서 듀토리얼을 클릭한다.

지도 API중 Javascript 2.0 지도 API사용하기 클릭한다.






그럼 아래 이미지처럼 듀토리얼 화면이 나온다.

첫번째 사용예제를 복사하거나 예제 아래쪽에 있는 샘플파일다운로드 버튼을 클릭한다.





내려받은 샘플 파일중 script부분에 발급받은 키를 입력한다. 


1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>샘플코드</title>        
</head>
<body>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=발급받은키입력">
</script>

cs



그리고 키 발급시 신청한 URL로 접속하면 끝.

아래 이미지처럼 나온다면 성공!

(서버구동은 생략 - node.js로 웹 서버 띄웠습니다.)





자.. 이제 해야할 것은.. 개발하자 ㅠ_ㅠ 






맨 위로