티스토리 뷰
728x90
네이버 지도 API를 적용방법 (웹)
1. https://dev.naver.com/openapi/register 에서 지도API 키를 발급 받습니다.
2. 페이지 헤더에 아래 코드를 추가 합니다.
<script type="text/javascript">
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=발급 받은 지도API 키"></script>
3. 지도를 표시할 div를 하나 만들어주고 지도 생성 스크립트를 넣어줍니다.
<div class="mapBox" id="map"></div> //지도가 들어갈 div
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(35.8446585, 128.5592607); //LatLng 값이 y, x 좌표
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('map' ,{ //표시될 div의 id 입니다.
point : oPoint,
zoom : 11, //기본 지도 줌 크기
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(690, 338) //표시될 지도 크기
});
//아래는 위에서 지정한 좌표에 마커를 표시하는 소스 입니다.
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
//icon 이미지를 바꿔서 사용할 수 있습니다.
var oMarker = new nhn.api.map.Marker(oIcon, { title : '타이틀' });
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
//아래는 사이드에 줌 컨트롤을 추가하는 소스 입니다.
var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
mapZoom.setPosition({left:20, bottom:40}); // - 줌 컨트롤 위치 지정
oMap.addControl(mapZoom); // - 줌 컨트롤 추가.
</script>
사용해보니 간단하기는 한데 정리해봤습니다.
마지막으로 키 발급시 중요한게 사용 도메인을 적어야하는데 로컬에서 작업할때는 127.0.0.1로 키 발급 신청을 해서 테스트 하시고 실서버에 올리실때 키를 바꿔주셔야 합니다.
728x90
'헉!! > javascript' 카테고리의 다른 글
[javascript] 쿠키 생성, 삭제 (1) | 2013.04.15 |
---|---|
[javascript] 크롬에서 window.open의 fullscreen (3) | 2013.03.12 |
[jquery] jquery autocomplete를 사용한 자동완성 키워드 선택시 바로 검색 (0) | 2013.03.04 |
[javascript] 만들었더니 쓸모없어진 달력 스크립트 (0) | 2013.02.21 |
[javascript] 따라다니는 버튼 스크립트 (0) | 2013.02.13 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- 제이쿼리
- Programming
- 아이폰 개발
- Objective-C
- JSP
- Object C
- Xcode
- 오브젝티브 C
- JavaScript
- jQuery
- oracle
- MacOS X
- tomcat
- Spring
- iOS 개발
- 오브젝트 C
- MAC OSX 10.7
- 아이폰
- Spring Framework
- IT
- SQL
- MySQL
- 자바스크립트
- Java
- Objective C
- iPhone
- 아이폰 어플리케이션
- zero
- iBATIS
- 자바
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
글 보관함