네이버 지도 API 연동과 좌표 변환

10일 전 5,219

네이버 지도 v4에서는 HTML 태그 복사로 간단히 홈페이지에 지도를 삽입할 수 있었지만 지금은 URL 복사만 지원합니다. 때문에 웹사이트에서 네이버 지도를 이용하려면 네이버 클라우드의 '지도 API'를 연동해야 합니다.
또한 조금 오래 전에 지도 API를 연동했었다면 갑자기 '네이버 지도 Open API 인증이 실패했습니다.'라는 메시지를 보게될 수도 있습니다. 이 경우에도 다시 새로운 인증을 받아야 합니다.
네이버 클라우드 가입 시 결제정보는 받지만 실제 이용은 무료로 할 수 있습니다.

네이버 클라우드 가입

회원 가입 후 결제수단 즉, 신용카드 정보를 등록해야 합니다. 그러나 지도 API 이용 시 주로 이용하는 'Web Dynamic Map'의 경우 월간 1,000만건의 이용한도 내에서는 무료이므로 비용이 발생할 일은 없습니다. 네이버 클라우드에서 내가 이용하는 서비스의 사용 금액은 '마이페이지'에서 확인할 수 있습니다.
https://www.ncloud.com

'지도' 이용신청

아래 URL을 클릭하여 'Maps' 이용신청하기를 클릭하여 나오는 화면에서 'Application 등록'을 클릭합니다.
https://www.ncloud.com/product/applicationService/maps

ncloud.com-1

자세한 내용은 네이버 클라우드의 Application 사용 가이드를 참고하세요.

'인증 정보' 확인

Application 등록이 완료되면 이제 'Application 리스트'에서 방금 전 신청한 내 'App 이름'을 볼 수 있습니다. App 이름 바로 아래 있는 '인증 정보' 버튼을 클릭합니다. 자세한 화면은 공통 가이드 Application 사용을 위한 인증 정보를 참고하세요.
인증 정보에서 중요한 항목은 Client ID (X-NCP-APIGW-API-KEY-ID)입니다.

주소와 좌표 검색

이제 웹사이트 페이지에 지도 DOM 요소를 넣는 코딩을 해야 하는데 이때 지도 상의 좌표가 필요합니다. 예컨대 네이버 지도의 기본값은 '서울 시청 좌표'로 37.5666103, 126.9783882 입니다. 지도 상에 표시되는 중심 좌표를 입력하지 않은 상태라면 서울 시청을 중심으로 보여지는 지도가 출력됩니다.

좌표는 구글 지도 검색을 통해 확인합니다. https://www.google.com/maps 페이지에서 '경복궁' 혹은 '사직로 161' 등으로 필요한 곳을 검색한 후 마커 위에서 마우스 우클릭을 하면 좌표를 복사할 수 있습니다. 복사한 좌표는 자릿수가 더 많지만 네이버 지도 스크립트 'naver.maps.LatLng'에 그대로 이용할 수 있습니다.

경복궁-Google-지도

https://goo.gl/maps/2jgvMBdNRESAE92f9

Curl이 지원되는 서버에 접속할 수 있다면 아래와 같이 명령어를 입력해서 좌표를 얻을 수도 있습니다.

curl https://naveropenapi.apigw.ntruss.com/map-geocode/v2/geocode?query=YOUR_ADDRESS -H "X-NCP-APIGW-API-KEY-ID:YOUR_CLIENT_ID" -H "X-NCP-APIGW-API-KEY:YOUR_CLIENT_SECRET" -v

쿼리에 들어가는 한글 주소는 URL 인코딩해야 합니다. 예컨대 '사직로 161'이라는 주소는 '%EC%82%AC%EC%A7%81%EB%A1%9C%20161%0A'로 변환하여 입력합니다. https://coderstoolbox.net/string 사이트를 이용하면 편리합니다.

사용자 페이지 코딩

네이버 지도를 보여줄 웹사이트 사용자 페이지에 아래와 같은 코드를 입력합니다.

우선 'NAVER 지도 API v3'를 로드합니다. 아래 코드를 <head></head> 태그 사이 어디엔가 입력합니다.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>

웹 페이지에 지도를 삽입할 DOM 요소를 지정합니다. 보통 <div></div> 요소를 사용하여 원하는 크기로 지정합니다.

<div id="map" style="width: 100%; height:480px;"></div>

마지막으로 지도 옵션을 설정하는 스크립트를 입력합니다.

<script type="text/javascript">
function initMap() {
    map = new naver.maps.Map('map', {
        center: new naver.maps.LatLng(37.3595704, 127.105399),
        scaleControl: true,
        mapTypeControl: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: naver.maps.MapTypeControlStyle.BUTTON,
            position: naver.maps.Position.TOP_LEFT
        },
        zoomControl: true,
        zoomControlOptions: {
            style: naver.maps.ZoomControlStyle.SMALL,
            position: naver.maps.Position.TOP_RIGHT
        },
        zoom: 15
    });
    var marker = new naver.maps.Marker({
        position: new naver.maps.LatLng(37.3595704, 127.105399),
        map: map
    });
}
</script>

더 많은 예제 및 옵션은 네이버 클라우드의 NAVER 지도 API v3를 참고하세요.


홈페이지 제작 기간은 보통 얼마나 걸리나요?

홈페이지, 쇼핑몰 등 웹사이트 제작에 걸리는 기간은 짧게는 며칠에서 ..

홈페이지, 웹사이트 디자인 사이즈

현재 인터넷 이용자의 미디어 해상도를 고려했을 때 적절한 홈페이지 가..

웹 호스팅 선택 기준과 비용, 추천 업체

웹 호스팅은 홈페이지나 쇼핑몰을 운영하기 위해 꼭 필요한 웹 서버를 ..

그누보드, 워드프레스, 제로보드 등 편리한 웹사이트 제…

홈페이지, 쇼핑몰, 커뮤니티 제작 시 비용과 시간을 줄이고 편리하게 ..

디비컷, 추천 웹에이전시와 웹디자인 참고 사이트

웹디자이너 커뮤니티 '디비컷'과 카페24 디자인센터, 아카데미 정글,..

웹 호스팅, 웹 서버 관리 방법

전문적인 호스팅 업체를 이용할 경우 데이터와 DB의 백업이 매일 새벽..