[팀 껌딱지] 네이버 지도 API 사용하기

시작하며

안녕하세요 껌딱지 개발팀에서 front-end 개발 파트를 맡고 있는 민규입니다!
 
사용자들에게 위치 정보를 전달할 때에 있어 지도만큼 직관적이고 편리한 도구는 없다고 생각하는데요.
이번 프로젝트에서 지도 API를 사용한 경험을 공유하고자 합니다.
 

네이버 VS 카카오

지도를 사용하고자 했을 때 네이버 지도와 카카오 지도를 두고 많이 고민했습니다.
저는 아래 두 가지를 중점적으로 생각하며 고민했는데요.
 
1. 사용량 한도 (가격 정책)

	네이버	카카오
Web Dynamic Map	1개월 10,000,000 회 사용가능	1일 300,000 회 사용 (1개월 약 9,000,000 회)
Geocoding	1개월 3,000,000 회 사용가능

제가 사용했던 서비스 기준으로 사용량 한도에서는 네이버 지도가 더 우위에 있다고 생각했습니다.
 
2. 사용자 편의성
네이버 지도와 카카오 지도가 제공하는 기능은 비슷합니다.
길 찾기를 하거나 지도를 사용할 때 플랫폼 점유율이 네이버 지도가 더 높다고 생각합니다.
 
이러한 이유로 저는 네이버 지도 API를 사용하기로 했습니다.
 

네이버 지도 API 사용방법

네이버 지도 API 콘솔 등록하기 → HTML 파일에 불러오기 → 위치 설정하기
이렇게 3개의 파트로 분류할 수 있습니다.
 

HTML 파일에 불러오는 방법

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=<Client ID>&submodules=geocoder"></script>

해당 스크립트 태그에서 Client ID만 수정해 주면 불러오는 방법은 완료됩니다.
 

기본 위치 설정하기

var centerCoord = new naver.maps.LatLng(37.5666102, 126.9783881); // 시청 좌표
var map = new naver.maps.Map('map', {
    center: centerCoord,
    zoom: 15
});

 

시청을 기준으로 지도가 생성됩니다.
 

지도 위치 변경하기

var address = '한강로3가 40-999';
naver.maps.Service.geocode({
    address: address
}, function(status, response) {
    if (status === naver.maps.Service.Status.OK) {
        var result = response.result;
        var firstItem = result.items[0];
        var coords = new naver.maps.LatLng(firstItem.point.y, firstItem.point.x);

        map.setCenter(coords);

        var marker = new naver.maps.Marker({
            position: coords,
            map: map
        });
    } else {
        alert('주소를 찾을 수 없습니다.');
    }
});

해당 기능은 geocoder를 사용한 기능입니다.
address를 네이버 API에 전달하고 받은 값을 지도에 반영하고 변경한 주소에 마커를 찍은 코드입니다.

 
address를 유동적으로 수정할 수 있다면 다양한 지역을 지도에 반영할 수 있습니다!
 

네이버 지도 API의 불편했던 점과 해결방법

지도 위치를 변경할 때에 있어 주소 설정을 좌표 또는 도로명 주소만을 사용해야만 했습니다.

Select box를 사용하여 지명을 선택하면 해당 주소가 자동으로 입력되도록 설정했습니다.
해당 방법으로 자주 사용하는 지명은 도로명 주소를 따로 사용하지 않고도 입력할 수 있게 되었습니다!
 

마치며

네이버 지도를 선택한 이유와 API 사용 방법 및 불편했던 점, 해결방법에 대해서 설명해 보았습니다.
네이버 지도 API를 사용함에 있어 조금이나마 도움이 되었으면 좋겠습니다!
지금까지 서툰 글 봐주셔서 감사합니다. 더욱 발전하는 front-end 개발자 민규가 되겠습니다!