1. 네이버 지도 api 키발급하기
처음으로 해야할일은 일단 키를 등록/관리 하여야 합니다.
키등록/관리 페이지로 https://dev.naver.com/openapi/register
2. 예제소스에 키 삽입하기 (상단에서 등록한 키를 예제 소스에 삽입하기)
http://dev.naver.com/openapi/apis/map/javascript_2_0/example
|
<!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" lang="en_US" xml:lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenAPI 2.0 - 지도 생성</title>
<!-- prevent IE6 flickering -->
<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=f32441ebcd3cc9de474f8081df1e54e3"></script>
</head>
<body>
<div id = "testMap" style="border:1px solid #000; width:500px; height:400px; margin:20px;"></div>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('testMap' ,{
point : oPoint,
zoom : 10,
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(500, 400)
});
</script>
</body>
</html>
|
f32441ebcd3cc9de474f8081df1e54e3이 부분에 되었는 부분에 등록한 키를 대체 해넣어야 합니다.
width:500px; height:400px , (500, 400) 이 두 부분은 보여지는 가로 세로 사이즈 입니다.
(37.5010226, 127.0396037); 이 부분은 위도와 경도 사이즈 입니다
3. 위도와 경도 찾기
네이버지도에서 주소를 검색후 원본 url을 카피 합니다
http://map.naver.com/?dlevel=12&lat=37.4960588&lng=127.0329644&search.....
처음 나오는 숫자와 두번째 숮자 부분이 위도와 경도 입니다. 이부분을 샘플 코드에서 교체 해 넣습니다.
4. 위치 라벨표시와 회사의 타이틀 표시하기
아래 내용을 추가하여 회사의 위치에 내가 원하는 아이콘을 표시 할수 있습니다.
자 이제 API지도로 위치를 손쉽게 온라인에서 알려 줍시다
|
<script type="text/javascript">
var oSize = new nhn.api.map.Size(28, 37); //아이콘 사이즈
var oOffset = new nhn.api.map.Size(16, 37); //아이콘 사이즈에 따른 위치 보정
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
oMarker = new nhn.api.map.Marker(oIcon, { title : 'MCM본사' }); //마커 제목 생성
oMarker.setPoint(oMap.getCenter()); // 마커 표시할 좌표 선택
oMap.addOverlay(oMarker); //마커를 지도위에 표시
//마커 라벨 출력
oLabel = new nhn.api.map.MarkerLabel(); //마커 라벨 선언
oMap.addOverlay(oLabel); //마커 라벨 지도에 추가, 기본은 보이지 않는 상태로 추가됨
oLabel.setVisible(true, oMarker); //마커 라벨 보이기
</script> |
댓글