네이버 지도 API 사용법 | 지도 | 마커

네이버 지도 API

 

이번 프로젝트에서 지도 파트를 맡으면서, 네이버 지도와 친해져야 살아남을 수 있게 되었다.

네이버 지도 API와 친해지기 위해 주요 기능만 뚝딱 정리해보기로 했다.

 

공식 문서는 이쪽!

NAVER Maps API v3

 

🌏 지도 생성하기

var container = document.querySelector(".container");

var map = new naver.maps.Map(container);

 

 

🔧 지도 옵션 설정

지도를 생성하고 옵션을 설정할 수 있다.

 

center : new naver.maps.LatLng(${latitude},${longitude})

먼저, 간단하게 현재위치의 위도(latitude)와 경도(longitude)를 중심점으로 설정한 지도를 생성해보자.

원하는 위치가 있다면 위도, 경도의 변수를 원하는 값으로 설정하면 된다.

      function initialMap(){
        // 지도를 그리고 싶은 컨테이너
        var container = document.querySelector(".container");

        // 초기 중심값 잡기 (현재 위치를 받아보겠다.)
        var la, lo;
        navigator.geolocation.getCurrentPosition(function(pos)=>{
          la = pos.coords.latitude;
          lo = pos.coords.longitude;
        });

        var mapOptions = {
          center : new naver.maps.LatLng(la, lo)
        }

        var map = new naver.maps.Map(container, mapOptions);

      }

중심점 옵션을 사용하지 않으면 서울 시청을 중심으로 하는 지도가 생성된다고 한다.

 

zoom : ${원하는 값}

줌 정도를 조절할 수 있다. 초기 레벨은 13으로 숫자가 커질수록 더 좁은 반경을 보게 된다.

 

zoomControl : ${boolean 값}

사용자가 줌을 조절하는 권한을 설정할 수 있다.

 

 

🚎 지도 이동하기

지도의 중심을 이동시킬 때, 애니메이션 효과를 지정할 수 있다.

 

map.setCenter (new naver.maps.LatLng(위도, 경도))

바로 똭! 이동시키기

 

map.panTo (new naver.maps.LatLng(위도, 경도))

이전 중심값이 이동하는 곳과 가까우면 부드럽게 이동

 

map.panToBounds (new naver.maps.LatLng(위도, 경도))

이전 중심값과의 거리와 상관없이 부드럽게 이동 

 

 

🎯 마커 찍기

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
});

var marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.3595704, 127.105399),
    map: map
});

 

 

💡 마커 표시하기

// 마커가 여러개 있다고 가정해보자
var markers = [마커1, 마커2, 마커3];

naver.maps.Event.addListener(map, 'idle', function(){
	updateMarkers(map, markers);
 });

function updateMarkers(map, markers) {

	// 현재 화면에 표시되고 있는 지도의 경계
    var mapBounds = map.getBounds();
    var marker, position;

    for (var i = 0; i < markers.length; i++) {

        marker = markers[i]
        position = marker.getPosition();
		
        // 마커의 좌표가 경계 안에 위치할 때 보여주기
        if (mapBounds.hasLatLng(position)) {
            showMarker(map, marker);
        } else {
            hideMarker(map, marker);
        }
    }
}

// 마커 표시하기
function showMarker(map, marker){
	if(marker.setMap())
    	return;
   marker.setMap(map)
}

// 마커 지우기
function hideMarker(map, marker){
	if(!marker.setMap())
    	return;
    marker.setMap(null);
}

 

 

📰 마커 클릭 시, 정보창 표시하기

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 />',
        '   </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);

 

 

 

지금까지 사용한 기능은 이정도인 것 같다. 플젝하면서 늘어나면 또 추가해야지 ~