감성 퍼블리셔 html,css

네이버 API 지도 활용 본문

기타

네이버 API 지도 활용

빅범 2015. 4. 14. 17:51
네이버 API 지도 활용

 

 

먼저 하단의 주소에 네이버에서 제공하는 API키를 발급받습니다.

 

https://developer.naver.com/openapi/register.nhn  (API 키 발급받기)

 

위 페이지로 갔을시 항목중에 '지도 API 부분'에서 적용하고자 하는 사이트URL 로 발급키를 생성합니다. 

해당키값 + 노출하고자 하는 주소지를 아래와 같은 형식으로 검색!

http://openapi.map.naver.com/api/geocode.php?key=발급받은키&encoding=euc-kr&coord=LatLng&query=검색주소지

 

샘플주소 : http://openapi.map.naver.com/api/geocode.php?key=test&encoding=utf-8&coord=tm128&query=경기도성남시정자1동25-1

 

이와같이 URL를 입력하면 페이지내에는 아래와 같은 내용을 보여줍니다.

 

 

내용을 잘 보시면 검색한 주소지를 X값, Y값으로 추출한것이 보여집니다. 이부분을 필히 적어놓아주세요!

해당 좌표로 기본소스부분에 적용하시면 됩니다. (아래소스)

 

 

기본적으로 html 본문에 작성하는 태그이다.

 

head 안에 발급받은 키로 스크립트를 불러온다.

<head>

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&amp;key=발급키값"></script>

</head>

 

<body>

<div id="map">
 <script type="text/javascript">
  var oPoint = new nhn.api.map.LatLng(37.5675451, 126.9773356); // y값,x값순으로 기재
  var defaultLevel = 11;  //기본 줌 설정

  //기본
  var oMap = new nhn.api.map.Map(document.getElementById('map'), {
  point : oPoint,
  zoom : defaultLevel,
  enableWheelZoom : true,
  enableDragPan : true,
  enableDblClickZoom : false,
  mapMode : 0,
  activateTrafficMap : false,
  activateBicycleMap : false,
  minMaxLevel : [ 1, 14 ],
  size : new nhn.api.map.Size(800, 480) // 지도 사이즈 가로*세로
  });

  //줌
  var oSlider = new nhn.api.map.ZoomControl();
  oMap.addControl(oSlider);
  oSlider.setPosition({
  top : 10,
  left : 10
  });

  //지도 타입
  var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
  oMap.addControl(oMapTypeBtn);
  oMapTypeBtn.setPosition({
  bottom : 10,
  right : 110
  });
  
  //실시간 교통
  var trafficButton = new nhn.api.map.TrafficMapBtn();
  trafficButton.setPosition({
  bottom:10,
  right:180
  });

  oMap.addControl(trafficButton);

  //마커
  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 oPoint = new nhn.api.map.LatLng(37.5675451, 126.9773356);
  var oMarker = new nhn.api.map.Marker(oIcon, { title : '약도 장소' }); //말풍선 부분

  oMarker.setPoint(oPoint);
  oMap.addOverlay(oMarker);

  var oLabel = new nhn.api.map.MarkerLabel();
  oMap.addOverlay(oLabel);
  oLabel.setVisible(true, oMarker);
  //oLabel.setVisible(true, oMarker);     //마커 표시 설정
 </script>

</div>

 

</body>

 

이렇게 좌표를 적용하고, 저장을 합니다. (*좌표는 기본맵, 마커부분에 동일 적용합니다.)

적용한 페이지에서 확인을 하시면 아래와 같이 지도부분이 출력이 됩니다.

 

 

뚜뚠!! 나름 손이 좀 가는 작업이였습니다...

 

웹표준 접근성 마크 획득에 있어서 타사이트에서 제공하는 지도API의 웹표준과 어긋난다고 하여 고생이 나름 있었습니다.

요근래 제공하는 지도API에 대해서 규율이 엄격해졌다고 하시네요..ㅠ (저희 입장에서는 타사에서 제공해주는 것을 가져다 쓰는것이라, 많은 어려움이 있죠..제공해주는 업체쪽에 푸쉬를 한다고는 하는데 신속한 보완은 당연히 어렵겠죠..)

 

들은바에 따르면 구글은 아예 비표준화 되어있고, 다음은 약간에 키보드 접근의 미비함이 있다고 합니다.

담당자분께서 그나마 네이버 API가 가장 접근성에 가깝다고하여 적용방법에 대해서 작성하였습니다.

저와 같은 고충에 힘겨워 하셨다면 조금이라도 도움이 되었으면 하네요

 

 

네이버 API 메뉴얼 가이드 : http://developer.naver.com/wiki/pages/JavaScript

기본적인 내용에 대해서만 적용하였으니 해당 메뉴얼 페이지도 확인해서 커스텀하셔도 될 듯합니다!

 

 

 

저작자표시

'기타' 카테고리의 다른 글

[Mobile] 모바일 화면 미리보기 Daum Troy plug-in  (0) 2017.01.04
디자인 관련 사이트  (0) 2015.08.06
본고딕(Source Han Sans) 소개: 오픈 소스 한중일 통합 서체  (0) 2014.08.07
일러스트 단축키  (0) 2014.07.04
'기타' Related Articles more
Comments