티스토리 블러그에 네이버 지도 달기

블러그를 사용하다보니 방문한 위치나 식당등의 특정위치를 지도로 표시하면 방문자들이 더쉽게 이해할수 있을거 같아서 지도를 달아보기로 했습니다.

대부분 네이버 검색을 많이 이용하다보니 네이버 블러그를 자주 접하게되고 살펴보면 네이버지도를 많이 달았던데 네이버 블러그를 사용하는 사용자들은 쉽게 달수있도록 네이버 블러그에서 아래와같이 그기능을 지원해주는거 같았습니다.

하지만 난 티스토리 블러그 사용자니깐 다른 방법을 찾아야만 했습니다.

물론 네이버 검색후 표시되는 지도화면에서 공유라는 메뉴로 지도를 퍼갈수 있는 기능을 지원했지만 그지도는 단순 이미지와 랑크를 지원할뿐이었고 네이버 블러그처럼 블러그내에서 지도를 사용자가 이리 저리 위치를 바꿔가며 확인할수 있는건 아니었습니다.

그래서 몇가지 검색을 통해 네이버가 지도를 OPEN API로 제공하고 있다는 것을 확인했습니다.

여기서 OPEN API는

공개 API(Open Application Programming Interface, Open API, 오픈 API)는 누구나 사용할 수 있도록 공개된 API를 말한다.

구글맵이 대표적인 예이다. 지도 서비스 및 다양한 서비스들에서 시도되고 있으며 누구나 접근하여 사용할 수 있다는 장점이 있다. 메타블로그들도 공개 API를 사용하여 만드는 것들이다.

라고 위키(https://ko.wikipedia.org/wiki/%EA%B3%B5%EA%B0%9C_API)가 알려주네요.

그럼 API는???

API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다.

라고 역시나 위키(https://ko.wikipedia.org/wiki/API)에서 알려주십니다.

쉽게 말해서 이미 만들어진 기능(지도검색, 주소검색, 날씨검색, 주식검색, 등등등)이 존재하고 그 기능을 사용하기 위해 사용자가 특정 정보를 원한다고 그 프로그램에 요청(인터페이스)을 하면 그 프로그램은 요청한것에 대해 자신이 가지고 있는 정보를 사용자에게 편리하게 쓸수 있도록 가공이 가능한 데이터로 돌려주는데 이를 API라고 하고 이미 이기능을 보유한 기업이나 단체가 무상으로 누구나 쓸수 있도록 제공하면 OPEN API라고 말하는것입니다.

만약 내가 기상청에서 제공하는 날씨정보를 내 블러그나 홈페이지에서 기상청 홈페이지에 가지않아도 날씨를 보여줄수 있도록 해놓았다면 나는 기상청에서 제공하는 OPEN API 를 사용한것이 되는것이죠.

이제 네이버에서 제공하는 OPEN API를 이용하여 네이버의 지도를 달아봐야겠습니다.

첫번째로 할것은 네이버의 가입하는 일입니다.

그런데 우리나라 국민중에 네이버 아이디가 없는 사람은 극히 드물것이고 가입방법도 간단하니 네이버 가입방법은 패스~~~

그다음으로는 네이버에서 OPEN API에 대한 정보를 제공하는 사이트로 접근하여 인증키를 발급받아야 합니다.

인증키를 발급받는 이유는 네이버같은 정보제공 업체에서 무료로 정보를 제공해주지만 아무나 아무렇지 않게 무한정 쓸수있도록만 되어 있다면 그정보를 꼭 필요한곳이 아닌 불법적인곳에 이용하는 경우도 있고 무한정 제공하다보면 무한 반복으로 요청하는 곳이 발생할때에 엄청난 서버의 부하로 데이터 제공회선문제 그리고 폭증하는 트래픽등으로 인해 제공하는쪽에서도 부담해야 되는 비용이 너무 커지거나 잦은 서버 다운 그리고 불법적 해킹등으로 제공하기 힘들어질 경우 편리하게 다수의 사용자가 사용할수 있는 기회마저 뺏기게되는 일이 발생하므로 적절한 사용량의 제한이 현재는 일반적입니다. 그 제한을 위해 필요한것이 바로 인증키라는 것이며 비교적 많은 OPEN API가 이런 인증키 방식을 취하고 있습니다.

인증키 발급 사이트 주소는 네이버 개발자 센터(https://developers.naver.com/main)라는 사이트며 지도 외에도 여러가지 OPEN API를 제공하고 있으니 참고하세요.

네이버 개발자 센터 사이트에 접근하면 상단 메뉴중 Application을 선택하면 하위메뉴중에 애플리케이션 등록이라는 메뉴를 클릭합니다.

로그인전이라면 로그인 페이지가 보여지므로 일단 로그인 하시고 로그인후라면 아래와 같이 API 이용신청서를 작성하면 화면이 보입니다.

각 항목에 맞게 값을 선택 및 입력하시고 약관 동의후 등록하기 버튼을 누르시면 됩니다.

등록이 완료되면 왼쪽 메뉴중 내 애플리케이션 밑에 등록한 애플리케이션이 보이며

클릭하면 등록사항들을 확인할수 있습니다.

개요부분에 Client ID 항목의 값이 지도 API에서 사용할 인증키입니다.

지도 API를 사용하기 위한 방법과 예제는 별도로 구성되어 있는 

네이버 지도 API사이트(https://navermaps.github.io/maps.js/)에서 상세히 확인이 가능하므로 참고하시면 될겁니다.

아래는 네이버 지도 API 사이트 메인

메인의 시작하기 버튼을 클릭하면 시작하기 라는 타이틀로 블러그에 어떻게 네이버 지도를 첨부할수 있는지

간단한 예제와 방법이 있습니다.

프로그램을 해보신분들이라면 금방 이해하고 써먹으시겠지만

잘 모르시는분들이라면 잘 모르실텐데

위의 설명대로 간단하게 지도 하나를 올려보겠습니다.

우선 지도를 올리고자 하는 위치 먼저 선정을 합니다.

위치는 예제로 포항 시청으로 하겠습니다.

포항시청의 위/경도는 lat:36.0190238, lng:129.3433917 입니다.

그리고 배율을 정해야 하는데 네이버의 배율 범위는 1~14이며

수치가 높을수록 상세한 위치가 표시됩니다.

우선 블러그에 글쓰기를 선택후

입력 기능중에 아래의 표시와 같은 HTML을 체크합니다.

기존 입력한 내용들이 HTML 형태로 보여집니다.

입력내용안에 아래의 내용을 넣어줍니다.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=본인ClientId"></script>

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

<script>

var map = new naver.maps.Map('map', {

    center: new naver.maps.LatLng(36.0190238, 129.3433917),

    zoom: 10

});

</script>

그후 발행을 해보면 아래와 같이 지도가 표시되어 지고

마우스로 제어도 가능합니다.

정말 간단하죠

네이버에서 제공하는 건물 혹은 가게등의 연락처나 주소 정보등도 표시할수 있다면 좋을텐데

그건 어떻게하는지 아직 잘 모르겠네요.

네이버 지도 API사이트(https://navermaps.github.io/maps.js/)에는 

지도를 표현할때 필요한 다양한 옵션에 대한 설명이 존재하니

사이트의 도움말을 참조하시길 바랍니다.

한 예로 마크를 표현하고자 할때는 

아래와 같이 파란색 내용을 추가해서 다시 등록하시면 마크가 표시된 지도가 그려집니다.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=본인ClientId"></script>

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

<script>

var map = new naver.maps.Map('map', {

    center: new naver.maps.LatLng(36.0190238, 129.3433917),

    zoom: 10

});

var marker = new naver.maps.Marker({

        position: new naver.maps.LatLng(36.0190238, 129.3433917),

        map: map

});

</script>

마지막으로 어떤 특정장소의 지도를 표현할때 필요한 위/경도를 알수있는 방법이 필요한데

링크(주소를 이용 위경도 좌표로 변환)에서 주소로 위/경도 값을 가져올 수 있으니 참고하세요.