[네이버AIP] NAVER 지도 API(Map API 2.0)

[네이버AIP]  NAVER 지도 API(Map API 2.0)

 

 

1. 네이버 개발자센터에서 ‘API 이용신청(애플리케이션 등록)’을 통해 키를 발급받아 스크립트 URL의 clientId={아이디}에 아이디 명을 입력
2. 비로그인 오픈API서비스 환경에서 ‘웹 서비스 URL’을 등록하고 해당 URL에서만 이용 가능

 

 

구동될 자바스크립트 javascript

 

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/v2/maps.js?clientId={아이디}"></script>

 

파일.js

 

var oPoint = new nhn.api.map.LatLng(37.5675451, 126.9773356);
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 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 oInfoWnd = new nhn.api.map.InfoWindow();
oInfoWnd.setVisible(false);
oMap.addOverlay(oInfoWnd);

oInfoWnd.setPosition({
        top : 20,
        left :20
});

    // 마커 및 라벨
var oMarker = new nhn.api.map.Marker(oIcon, { title : '우리회사 위치' });  //마커를 생성한다
oMarker.setPoint(oPoint); //마커의 좌표를 oPoint 에 저장된 좌표로 지정한다
oMap.addOverlay(oMarker); //마커를 네이버 지도위에 표시한다

    var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
    oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
    oLabel.setVisible(true, oMarker); // 마커 라벨을 지도에 표시

    // 기본 마커 가시 상태 true | false
    oInfoWnd.attach('changeVisible', function(oCustomEvent) {
    if (oCustomEvent.visible) {
        oLabel.setVisible(true);
        }

 

 

결과 표시 HTML

파일.html

<div id="map" style="border:1px solid #000;"></div>