1. 이용신청하기
www.ncloud.com/product/applicationService/maps
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
2. Application 등록하기
3. Web Dynamic Map 사용
네이버 Maps API는 3개의 상품으로 구분된다.
1. 흔히 사용하는 기본적인 지도 API
2. (유료) 실시간 교통 정보로 출발지에서 목적지까지 최적의 경로를 찾아주는 Directions
3. 위치데이터로 원하는 장소를 검색할 수 있는 Places
Web 서비스 URL 등록 (일단 대충 적어놨다)
생성된 어플리케이션에서 인증정보를 확인할 수 있다.
4. 지도 기본 예제: 지도 띄우기
지도 가이드메뉴
guide.ncloud-docs.com/docs/ko/naveropenapiv3-maps-overview
Maps 개요 - Maps
쿠키 제공 동의 당사는 고객님의 브라우징 기반 정보를 바탕으로 관련 정보 및 광고 제공을 위하여 지식 기반 쿠키를 사용합니다.
guide.ncloud-docs.com
지도 JavaScript
navermaps.github.io/maps.js.ncp/
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
예제에서 제공해 준 JS 코드
//지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
var mapDiv = document.getElementById('map'); // 'map'으로 선언해도 동일
//옵션 없이 지도 객체를 생성하면 서울 시청을 중심으로 하는 16 레벨의 지도가 생성됩니다.
var map = new naver.maps.Map(mapDiv);5. 실제 스크립트에 사용해보기
//기본 지도 띄우기
<body>
<div id="map" style="width:1000px; height=500px; margin-top:40px">
</div>
</body>
<script type="text/javascript" src="//openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=인증센터ClientId입력"></script>
<script>
//지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
var mapDiv = document.getElementById('map'); // 'map'으로 선언해도 동일
//옵션 없이 지도 객체를 생성하면 서울 시청을 중심으로 하는 16 레벨의 지도가 생성됩니다.
var map = new naver.maps.Map(mapDiv);
</script>
++
마커 표시하기, 이미지 아이콘, 오버레이 등 다양하게 무료로 사용 가능하다.
