[html] 웹페이지에 네이버 지도 넣기 (NAVER Map API)

최근 만드는 개인 웹페이지에 네이버 지도를 넣게 되었다.

웹페이지에 지도가 들어가 있는건 너무 흔해서, html 복붙만 하면 뿅 하고 끝날거라고 예상했다.

하지만 찾아보다보니 구글/카카오와 다르게 네이버는 api를 통해 지도를 제공하고 있어 생각보단 단계가 많았따.

뭐 그렇다고 구글/카카오지도를 넣기는 싫어서 뚝딱뚝딱 네이버 지도를 넣어본 내용을 남겨본다.

 

1. 네이버 클라우드 플랫폼 회원가입

https://www.ncloud.com/

NAVER CLOUD PLATFORM

네이버 지도 api 를 사용하기 위해선 네이버 클라우드 플랫폼에 가입해야한다. 

나는 네이버 아이디를 사용해서 간편하게 가입했다.

 

2.  AI-NAVER API Application 등록

로그인 후 오른쪽 맨 위에 콘솔로 들어간다.

왼쪽 메뉴 중 Products & Services를 고르고, Maps가 속해있는 AI-NAVER API 를 클릭해준다.

 

 + Application 등록  버튼을 누르면 애플리케이션 이름 설정, 사용할 Service 선택창이 나온다

 

 

적당히 이름을 입력하고 원하는 서비스를 선택해주면 된다. 

나는 Web Dynamic Map 만 선택했다.

옆에 [서비스 설명/요금안내]를 누르면 Map API 관련한 상세 설명 페이지로 넘어가게되는데, Directions API 를 제외하면 이용요금이 무료이니 걱정하지 않아도 된다. (서비스 이용한도는 있긴한데 개인 페이지면 한도 넘기기는 쉽지 않을듯)

 

마지막으로 맨 밑에 있는 서비스 환경 등록에 지도를 사용할 URL을 입력 후, 저장을 누르면 된다.

나는 gh-page를 사용해서 깃허브에 호스팅중이라 깃허브 url만 입력했었는데, 막상 로컬에서 index.html 파일을 열어서 확인해보려니 지도가 작동하질 않았다. 그래서 file://~~/index.html 도 등록하고, 깃허브 url도 등록했다.

 

위 설명이 너무 단편적이라면.. Application 등록 버튼 옆에 있는 개발 가이드에 들어가면 훨씬 더 친절한 설명을 볼 수 있다.

https://guide.ncloud-docs.com/docs/ko/naveropenapiv3-application

Application 사용 가이드 - 공통 가이드

 

< 참고: Map API요금 안내 >

 

3. 인증정보를 활용해 네이버 지도 넣기

위 내용까지 진행했다면 App이 생성되어 있을 것이다. 이름 아래 인증 정보 버튼을 눌러서 key값을 확인한다

이제 작업중인 웹페이지의 html로 넘어가 코드 작업을 하면 된다.

밑에 script src 맨 끝에 [Client ID 값] 에 Application key의 Client ID 값을 넣어줘야 지도를 받아올 수 있다.

(다른 부분은 생략하고 지도 관련 코드만 적음)

<div class="container">
  <section class="section" id="section-3">
      <h1>오시는 길</h1>
      <div id="map" style="width: 70%; height: 300px; margin:auto"></div>
      <code id="snippet" class="snippet"></code>
  </section>
</div>

<!-- 각자 발급받은 Client ID 값 넣기 -->
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=[Client ID 값]"></script>
    <script id="code">
      var mapDiv = document.getElementById('map');
      var map = new naver.maps.Map(mapDiv);
</script>

옵션을 주지 않으면 서울 시청을 중심으로 지도가 생성된다.

 

4. 옵션을 활용해서 지도 꾸미기

단순히 지도를 보여주는걸 넘어서, 이제 원하는 대로 지도를 바꿔보자.

일단 중심 위치를 변경하기 위해선 장소의 위도,경도 값이 필요하다. 위도, 경도 값은 구글지도에서 편하게 얻을 수 있다.

장소를 검색하고, 마커에서 우클릭을 하면 바로 위도와 경도 값을 얻을 수 있다.

 

위도, 경도 값을 바탕으로 기존 html 스크립트를 아래처럼 변경했다. 초기 좌표 뿐만 아니라 줌 관련된 코드도 약간 손댔다.

또한 Marker를 사용해서 원하는 위치에 마커를 표시하도록 하였다.

<script id="code">
        var map = new naver.maps.Map('map', {
            center: new naver.maps.LatLng(37.50180355734507, 126.98714909796672), //지도의 초기 중심 좌표
            zoom: 17, //지도의 초기 줌 레벨
            minZoom: 8, //지도의 최소 줌 레벨
            zoomControl: true, //줌 컨트롤의 표시 여부
            zoomControlOptions: { //줌 컨트롤의 옵션
                position: naver.maps.Position.TOP_RIGHT
        }});
        var marker = new naver.maps.Marker({
            position: new naver.maps.LatLng(37.50180355734507, 126.98714909796672),
            map: map
        });
</script>

 

이제 지도 위치도 내가 원하는 곳으로 이동했고, 옆에 줌 컨트롤도 표시가 된다. (좀 더 네이버 지도가 된 느낌?)

하지만 원래 마커 위에 업체 정보같은게 표시되어야할 것 같은데 너무 휑하다. 

찾아보니 InfoWindow를 통해 여러 옵션을 또 줄 수 있었다.

 

 

일단 최종...?

infoWindow에 옵션이 없으면 디자인이 너무 안예뻐서 많이 손댔다.

html/css 조합에 익숙하지 않아서 밑에 contentString에 보면 스타일 값을 막 때려박은것을 볼 수 있다. 이렇게 해도 되는진 모르겠지만..

 

marker에 icon 옵션을 통해 아이콘 이미지를 바꾸는 것도 가능하다. (그냥 온라인 포토샵열어서 대충 그려서 만들었는데 괜히 핑크색 한것같다..)

 

정리하자면 마커 이미지를 바꾸고, 위에 정보창을 만들고, 마커를 클릭할때마다 정보창이 없어지고 나타나는 기능까지 들어갔다. 

 

 

<script id="code">
        var elluce = new naver.maps.LatLng(37.50180355734507, 126.98714909796672)
        var map = new naver.maps.Map('map', {
          center: new naver.maps.LatLng(37.50180355734507, 126.98714909796672),
          zoom: 17,
          minZoom: 8, //지도의 최소 줌 레벨
          zoomControl: true, //줌 컨트롤의 표시 여부
          zoomControlOptions: { //줌 컨트롤의 옵션
              position: naver.maps.Position.TOP_RIGHT
        }});
        var marker = new naver.maps.Marker({
            icon: {
              url: "./icon/heart-icon.png",
              scaledSize: new naver.maps.Size(30, 37),
              origin: new naver.maps.Point(0, 0),
            },
            position: elluce,
            map: map
        });

        var contentString = [
        '<div class="iw_inner" style="padding:5px; margin: 5px 0px 5px 0px; width: 150px; height: 45px; text-align: center; ">',
        '   <p style="foint-size: 2rem; margin: 0;">엘루체컨벤션</p>',
        '   <p style="font-size: 0.8rem; margin: 0;">서울 서초구 신반포로 23</p>',
        '</div>'
        ].join('');

        var infowindow = new naver.maps.InfoWindow({
            content: contentString,
            maxWidth: 200,
            height: 50,
            backgroundColor: "white",
            borderColor: "black",
            borderWidth: 2,
            disableAnchor: true,
            textAlign: "center",
            margin: "auto",

            pixelOffset: new naver.maps.Point(0, -5)
        });

        naver.maps.Event.addListener(marker, "click", function(e) {
            if (infowindow.getMap()) {
                infowindow.close();
            } else {
                infowindow.open(map, marker);
            }
        });

        infowindow.open(map, marker);
    </script>

 

 

네이버에 친절한 설명이 많아, 아래 페이지들을 보며 편집했다.

https://navermaps.github.io/maps.js.ncp/docs/naver.maps.html

NAVER Maps API v3

 

https://github.com/navermaps/maps.js.ncp/tree/master/examples/map

GitHub - navermaps/maps.js.ncp: NAVER CLOUD PLATFORM Maps JavaScript API v3

 

또 아래 사이트 덕에 처음 갈피를 잡을 수 있었다.

https://lpla.tistory.com/132

네이버 지도 API - 웹사이트에 네이버 지도 첨부

 

각자 잘 확인해서 예쁘게 지도를 넣으면 될 것 같다.

이만 끝!