[javascript] 네이버지도 연동하기 ( Naver Map )

먼저 필자가 작업한 네이버지도 결과 화면이다.

그리고, 네이버 api 연동 소스는 다음과 같다.

 

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=클라이언트키"></script>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
    center: new naver.maps.LatLng(35.854721, 128.482413),
    zoom: 16
};
var map = new naver.maps.Map('map', mapOptions);
 
var marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(35.854721, 128.482413),
    title: '계명대출판부\n보산관 105호',
    map: map
});
 
var contentString = [
        '<div style="padding:4px 4px;">',
        '   <div style="font-weight:bold;padding-bottom:3px;">계명대출판부</div>',
        '   <p>보산관 105호<p>',
        '</div>'
    ].join('');
 
var infowindow = new naver.maps.InfoWindow({
    content: contentString
});
 
naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});
 
infowindow.open(map, marker);
</script>

 

 

최근에 네이버지도가 기존의 api 가 폐지되고, 네이버 클라우드 플랫폼안으로 들어가면서 더욱 새롭게 바뀌었다.

 

www.ncloud.com/product/applicationService/maps

NAVER CLOUD PLATFORM

 

console.ncloud.com/mc/solution/naverService/application

새롭게 Application 이름을 등록하고, Web Dynamic Map 항목을 클릭하고 아래의 등록버튼을 눌러 완료한다.

 

인증정보 버튼을 눌러, 키값을 확인하도록 하자. 

Client ID 값으로 javascript 함수에 바로 이동한다.

 

그리고, Open API 관련 페이지에서 Example 소스와 Document 페이지를 통하여 소스를 자세히 꾸며볼 수 있다.

 

Maps Enterprise API 목록

docs.ncloud.com/ko/naveropenapi_v3/maps/overview.html

설명서

navermaps.github.io/maps.js.ncp/docs/tutorial-Map.html

NAVER Maps API v3

navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html

navermaps.github.io/maps.js.ncp/docs/tutorial-1-map-simple.example.html

 

[ 마커 이용하기 ]

navermaps.github.io/maps.js.ncp/docs/tutorial-2-Marker.html

[ 마커위에 정보창 올리기 ]

navermaps.github.io/maps.js.ncp/docs/tutorial-3-InfoWindow.html

 

var HOME_PATH = window.HOME_PATH || '.';
 
var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147),
    map = new naver.maps.Map('map', {
        center: cityhall.destinationPoint(0, 500),
        zoom: 15
    }),
    marker = new naver.maps.Marker({
        map: map,
        position: cityhall
    });
 
var contentString = [
        '<div class="iw_inner">',
        '   <h3>서울특별시청</h3>',
        '   <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br />',
        '       <img src="'+ HOME_PATH +'/img/example/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br />',
        '       02-120 | 공공,사회기관 &gt; 특별,광역시청<br />',
        '       <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
        '   </p>',
        '</div>'
    ].join('');
 
var infowindow = new naver.maps.InfoWindow({
    content: contentString
});
 
naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});
 
infowindow.open(map, marker);

 

[ 마커 아이콘 사용하기 ]

navermaps.github.io/maps.js.ncp/docs/tutorial-5-marker-html-icon.example.html

 

var HOME_PATH = window.HOME_PATH || '.';
var map = new naver.maps.Map('map', {
        bounds: naver.maps.LatLngBounds.bounds(new naver.maps.LatLng(37.3585229, 127.1010728),
                                              new naver.maps.LatLng(37.3658036, 127.1222656))
    });
 
var defaultMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.3606904, 127.1061625),
    map: map,
    icon: {
        content: '<img src="'+ HOME_PATH +'/img/example/pin_default.png" alt="" ' +
                 'style="margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; ' +
                 '-webkit-user-select: none; position: absolute; width: 22px; height: 35px; left: 0px; top: 0px;">',
        size: new naver.maps.Size(22, 35),
        anchor: new naver.maps.Point(11, 35)
    }
});
 
var greenMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.3613962, 127.1112487),
    map: map,
    title: 'Green',
    icon: {
        content: [
                    '<div class="cs_mapbridge">',
                        '<div class="map_group _map_group crs">',
                            '<div class="map_marker _marker num1 num1_big"> ',
                                '<span class="ico _icon"></span>',
                                '<span class="shd"></span>',
                            '</div>',
                        '</div>',
                    '</div>'
                ].join(''),
        size: new naver.maps.Size(38, 58),
        anchor: new naver.maps.Point(19, 58),
    },
    draggable: true
});
 
var pinkMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.3637770, 127.1174332),
    map: map,
    icon: {
        content: [
                    '<div class="cs_mapbridge">',
                        '<div class="map_group _map_group">',
                            '<div class="map_marker _marker tvhp tvhp_big">',
                                '<span class="ico _icon"></span>',
                                '<span class="shd"></span>',
                            '</div>',
                        '</div>',
                    '</div>'
                ].join(''),
        size: new naver.maps.Size(38, 58),
        anchor: new naver.maps.Point(19, 58),
    }
});
 
pinkMarker.setTitle('Pink Hot');
pinkMarker.setDraggable(true);