웹페이지에 네이버지도를 넣을 수 있습니다.
https://dev.naver.com/openapi/register
이곳에 가서 지도 API인증키를 발급받아야 합니다.
그다음 아래경로로 가서 예제소스를 퍼옵니다.
http://dev.naver.com/openapi/apis/map/javascript_2_0/example
여러가지 예제중 적당한 것을 골라서 퍼옵니다.
그다음 사용하고자 하는 주소의 경도와 위도를 얻어냅니다.
지도는 주소로 표시되지 않고 코드에 위도와 경도값을 넣어줘야 합니다.
http://openapi.map.naver.com/api/geocode.php?key=4e875208b896d36c2d3d4fd4b695b225&encoding=euc-kr&coord=LatLng&query=서울시 서초구 서초동 1629-1 서포반곡빌딩 4층
이렇게 코드값과 주소가 포함된 웹경로를 웹브라우저 주소창에 넣으면 다음과 같은 화면이 나옵니다.
아까 긁어온 소스에 키값과 x, y값을 적용해서 저장합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>지도테스트</title>
</head>
<body>
<div id = "itfsMap" style="border:2px solid #555; width:500px; height:500px; margin:20px; display:block;"></div>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=4e875208b896d36c2d3d4fd4b695b225"></script>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(37.4895607, 127.0191230); //위에서 얻은 y,x값을 이렇게 작성하여 준다 (y값,x값)
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('itfsMap', {
point : oPoint,
zoom : 11, // – 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(500, 500)
});
var mapZoom = new nhn.api.map.ZoomControl();
mapZoom.setPosition({left:40, bottom:40});
oMap.addControl(mapZoom);
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);
var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '(주)우리회사 서초반곡빌딩 4층' });
oMarker1.setPoint(oPoint);
oMap.addOverlay(oMarker1);
var oLabel1 = new nhn.api.map.MarkerLabel();
oMap.addOverlay(oLabel1);
oLabel1.setVisible(true, oMarker1);
</script>
</body>
</html>
이렇게 웹페이지에 네이버지도가 표시됩니다.
'WEB_TECH > 웹개발TIP' 카테고리의 다른 글
| [SNS연동]google+ 버튼 추가하기 (0) | 2013.11.19 |
|---|---|
| 텍스트박스안의 글자를 클립보드로 복사하는 자바스크립트 (0) | 2013.08.01 |
| 북마크 추가하는 스크립트 (0) | 2013.08.01 |
| iscroll로 carousel구현 (0) | 2013.07.10 |
| iscroll을 사용하여 모바일웹 내부에 스크롤 만들기 (0) | 2013.07.10 |
| [SNS연동] 내 웹페이지에 facebook 좋아요 버튼 달기 (0) | 2013.05.30 |
| [SNS연동] 웹페이지에 tweet버튼 달기 (0) | 2013.05.30 |
| [SNS연동] 웹에서 카카오톡 링크 사용하는 방법 (0) | 2013.05.30 |
| 웹페이지에서 나눔고딕 사용하는 방법 (0) | 2013.05.07 |
| video.js 플러그인을 알아봅시다. (0) | 2013.05.03 |
