매뉴얼

지도API Naver 지도 api JavaScript 2.0 시작하기

※ 네이버 지도를 사용하기 위해서는 네이버 api 센터에서 발급받은 키값이 필요합니다. [네이버 지도 api 센터 키 발급/관리 페이지]

※ 네이버 지도키값은 등록된 도메인 기준으로 인식하기 때문에 서브도메인을 사용하실경우 해당 서브도메인이 반드시 등록이 되어 있어야 합니다. [중요!]

{@
    $marker_array = array();
    $marker_array[] = array(35.1738395, 129.1288500, "아람커뮤니케이션", "아람커뮤니케이션의 내용입니다.");
    $marker_array[] = array(35.1581446, 129.1583542, "해운대해수욕장", "해운대 해수욕장의 내용입니다.");
    $marker_array[] = array(35.0967247, 129.0311102, "자갈치시장", "자갈치 시장의 내용입니다.");
@}
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=#여기에 네이버에서 발급받은 키값을 입력하세요"></script>
<div id="map" style="border:1px solid #000;"></div>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(35.1738395, 129.1288500);
var oMap = new nhn.api.map.Map(document.getElementById('map'), {
    point : oPoint,
    zoom :7,
    enableWheelZoom : true,
    enableDragPan : true,
    enableDblClickZoom : true,
    mapMode : 0,
    activateTrafficMap : false,
    activateBicycleMap : false,
    activateRealtyMap : true,
    minMaxLevel : [ 1, 14 ],
    size : new nhn.api.map.Size(866, 800)
});
// 줌 컨트롤러
var oSlider = new nhn.api.map.ZoomControl();
oMap.addControl(oSlider);
oSlider.setPosition({ top:15, left:15 });
//아래는 위에서 지정한 좌표에 마커를 표시하는 소스 입니다.
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 oPointArray = [];
var oContentArray = {};

 <!--@foreach($marker_array as $k => $v)-->
var oPoint{$k} = new nhn.api.map.LatLng({$v[0]}, {$v[1]});
oPointArray.push(oPoint{$k});
oContentArray['{$v[2]}'] = '{$v[3]}';

oMarker = new nhn.api.map.Marker(oIcon, { title : '{$v[2]}' }); //마커 제목 생성
oMarker.setPoint(oPoint{$k}); // 마커 표시할 좌표 선택
oMap.addOverlay(oMarker); //마커를 지도위에 표시

//마커 라벨 출력
oLabel = new nhn.api.map.MarkerLabel(); //마커 라벨 선언
oMap.addOverlay(oLabel); //마커 라벨 지도에 추가, 기본은 보이지 않는 상태로 추가됨
oLabel.setVisible(true, oMarker); //마커 라벨 보이기
<!--@end-->


//########################## 마커 추가 부분 ##########################
  
  
//########################## 마커 클릭 부분 ##########################
  
var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.
oMap.addOverlay(mapInfoTestWindow);     // - 지도에 추가.
 
oMap.attach('click', function(oCustomEvent) {
    var oPoint = oCustomEvent.point;
    var oTarget = oCustomEvent.target;
    
    mapInfoTestWindow.setVisible(false);
    if (oTarget instanceof nhn.api.map.Marker) {
        
        var oMarkerId = oCustomEvent.target.getTitle();

        oMap.setCenter(oPoint);

        
        mapInfoTestWindow.setContent("<div style='background:#FFF; width:auto; height:auto; padding:5px; white-space: nowrap !important; border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;'>"+oContentArray[oMarkerId]+"</div>");
        mapInfoTestWindow.setPoint(oTarget.getPoint());
        mapInfoTestWindow.setVisible(true);

        mapInfoTestWindow.setPosition({right : 15, top : 50});
        mapInfoTestWindow.autoPosition();
        return;
    }
});
  
//########################## 마커 클릭 부분 ##########################
  
  
//########################## 컨트롤 추가 ############################

 var oBicycleGuide = new nhn.api.map.BicycleGuide(); // - 자전거 범례 선언
oBicycleGuide.setPosition({
    top : 10,
    right : 10
}); // - 자전거 범례 위치 지정
oMap.addControl(oBicycleGuide);// - 자전거 범례를 지도에 추가.

var oTrafficGuide = new nhn.api.map.TrafficGuide(); // - 교통 범례 선언
oTrafficGuide.setPosition({
    bottom : 30,
    left : 10
});  // - 교통 범례 위치 지정.
oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.

var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({
    bottom:10, 
    right:150
}); // - 실시간 교통지도 버튼 위치 지정
oMap.addControl(trafficButton);

//###############################################################  
  
  
  
//########################## 폴리라인 ##############################
  
  //var Polyline = new nhn.api.map.Polyline(oPointArray);
  //oMap.addOverlay(Polyline); 

//########################## 폴리라인 ##############################

</script>

 

그럼 네이버의 위도 경도는 어떻게 구할까요?

[네이버지도] 페이지로 가셔서 해당 지역을 검색한 후 마커를 클릭해보면 아래 그림과 같은 팝업이 뜹니다.

 

URL 복사를 클릭하면 아래와 같이 주소가 적힌 프롬프트 창이 뜨는데요. 그 주소안에 파라미터 x는 경도 값, y는 위도 값입니다.

 

 

완성화면 : http://wdev.anybuild.co.kr/page/n_addr

네이버 지도 api 메뉴얼 http://developer.naver.com/wiki/pages/Tutorial_JavaScript

 

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top