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

etc

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

Lpla

2021. 4. 25. 18:43

카카오 지도는 HTML 태그를 바로 복사하여 쓸 수 있지만 네이버 지도는 API를 사용해야 지도를 첨부할 수 있다.

따라서 카카오 지도를 써도 무방하면 이 글을 읽지 말고 카카오 지도를 사용하면 되고 반드시 네이버 지도를 써야 한다면 아래 내용을 따라하면 된다.

1. 회원가입

먼저 네이버 클라우드 플랫폼에 가입해야 한다.

NAVER CLOUD PLATFORM

cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification

www.ncloud.com

네이버 클라우드 플랫폼은 부분유료 서비스로 무료 제공 한도를 초과할 경우 비용을 청구하기 때문에 결제수단 정보를 입력해야 한다.

회원가입만 하고 결제수단을 등록하지 않으면 서비스를 제대로 이용할 수 없다.

만약 네이버 지도만 사용한다면 과금이 될 가능성은 거의 없다.

한도 초과에 가까워지면 휴대폰과 이메일로 알림이 오기 때문에 나도 모르는 사이에 돈 빠져 나갈 일은 없다.

위 요금 안내표에서 알 수 있듯이 Directions 를 제외하면 무료 서비스다.

Directions는 경로 탐색 서비스로 일반적인 길찾기와는 또 다르기 때문에 안심하고 사용하면 된다.

다만 만에 하나 언제 과금 구조가 바뀔지 모르니 100% 안심하면 안 된다.

2. 애플리케이션 등록

무사히 가입을 끝냈다면 로그인 이후 우측상단에 보이는 Console 버튼을 클릭하여 좌측 Products & Services 항목 중 AI-Naver API를 클릭한다.

Application 등록을 누르고 Web Dynamic Map과 Mobile Dynamic Map을 체크한 다음 아래 Web 서비스 URL에 지도를 첨부하고자 하는 사이트의 URL을 입력한다.

등록 후 인증 정보를 눌러 Client ID 값을 기억해둔다.

3. 기본 지도 첨부

먼저 웹사이트에 아래 스크립트를 추가한다.

YOUR_CLIENT_ID 대신 위에서 얻은 Client ID 값을 입력한다.

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

부산시청을 표시하는 지도는 아래와 같다.

<!-- 기본 지도 -->
<div id="map" style="width:100%;height:400px;"></div>
<script>
  var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
  };

  var map = new naver.maps.Map('map', mapOptions);
</script>

좌표값을 구하려면 구글 지도에서 우클릭하여 쉽게 얻을 수 있다.

네이버 지도에서는 그딴 기능 없다. 왜 없는지 이해가 안 간다.

zoom 값을 키우면 확대된다.

zoom: 17

4. 마커 표시

하지만 대부분의 경우 지도에 마커가 있는 지도를 사용할 것이다.

부산시청에 마커를 띄우는 방법은 아래와 같다.

<!-- 마커 -->
<div id="map" style="width:100%;height:400px;"></div>
<script>
  var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(35.17982543369992, 129.07499499992576),
    zoom: 17
  });

  var marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(35.17982543369992, 129.07499499992576),
    map: map
  });
</script>

5. 이미지 마커

기본 마커가 밋밋하고 심심하면 다른 이미지로 바꿀 수 있다.

<!-- 이미지 마커 -->
<div id="map" style="width:100%;height:400px;"></div>
<script>
  var position = new naver.maps.LatLng(35.17982543369992, 129.07499499992576);

  var map = new naver.maps.Map('map', {
    center: position,
    zoom: 17
  });

  var markerOptions = {
    position: position.destinationPoint(0, 20),
    map: map,
    icon: {
      url: 'https://navermaps.github.io/maps.js.ncp/docs/img/example/sally.png',
      size: new naver.maps.Size(50, 52),
      origin: new naver.maps.Point(0, 0),
      anchor: new naver.maps.Point(25, 26)
    }
  };

  var marker = new naver.maps.Marker(markerOptions);
</script>

6. HTML 마커

마지막으로 이미지 대신 HTML 태그를 마커로 쓸 수 있다.

이 경우 css도 수정해야 하고 효과나 기능을 추가하려면 자바스크립트도 수정해야 한다.

<div id="map" style="width:100%;height:400px;"></div>
<script>
  var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(35.17982543369992, 129.07499499992576),
    zoom: 17
  });

  var defaultMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(35.17918912866763, 129.07451378770116),
    map: map,
    icon: {
      content: '<img src="https://navermaps.github.io/maps.js.ncp/docs/img/example/pin_default.png" alt="" ' +
        'style="margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; ' +
        '-webkit-user-select: none; position: absolute; width: 22px; height: 35px; left: 0px; top: 0px;">',
      size: new naver.maps.Size(22, 35),
      anchor: new naver.maps.Point(11, 35)
    }
  });

  var greenMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(35.17982543369992, 129.07499499992576),
    map: map,
    icon: {
      content: [
        '<div class="cs_mapbridge">',
        '<div class="map_group _map_group crs">',
        '<div class="map_marker _marker num1 num1_big"> ',
        '<span class="ico _icon"></span>',
        '<span class="shd"></span>',
        '</div>',
        '</div>',
        '</div>'
      ].join(''),
      size: new naver.maps.Size(38, 58),
      anchor: new naver.maps.Point(19, 58),
    },
  });

  var pinkMarker = new naver.maps.Marker({
    position: new naver.maps.LatLng(35.1797300342576, 129.07645609254797),
    map: map,
    icon: {
      content: [
        '<div class="cs_mapbridge">',
        '<div class="map_group _map_group">',
        '<div class="map_marker _marker tvhp tvhp_big">',
        '<span class="ico _icon"></span>',
        '<span class="shd"></span>',
        '</div>',
        '</div>',
        '</div>'
      ].join(''),
      size: new naver.maps.Size(38, 58),
      anchor: new naver.maps.Point(19, 58),
    }
  });
</script>

.cs_mapbridge .map_group .map_marker { position: absolute; width: 20px; height: 20px; z-index: 5}

.cs_mapbridge.map_group.map_marker[class*=_big] { z-index: 6}

.cs_mapbridge.map_group.map_marker.ico { position: absolute; background: url(https: //navermaps.github.io/maps.js.ncp/docs/img/example/sp_mapbridge5.png) no-repeat; background-size: 400px 450px; z-index: 10}

.cs_mapbridge.map_group.map_marker.ico:after { position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; background-color: transparent; content: ''; z-index: 30}

.cs_mapbridge.map_group.map_marker.shd { position: absolute; top: 0; left: 0; background: url(https: //navermaps.github.io/maps.js.ncp/docs/img/example/sp_mapbridge5.png) no-repeat; background-size: 400px 450px; content: ''}

.cs_mapbridge .map_marker.hp .ico { width: 26px; height: 36px; background-position: -175px 0; background-size: 400px 450px; transform-origin: 12px 100%; } 

.cs_mapbridge .map_marker.hp_big .ico { width: 38px; height: 58px; background-position: -175px -45px; background-size: 400px 450px; transform-origin: 19px 54px; } 

.cs_mapbridge .map_marker.hp_big .shd { top: 24px; left: 8px; width: 38px; height: 34px; background-position: -175px -105px; background-size: 400px 450px; } 

.cs_mapbridge .map_marker.tvhp .ico { width: 26px; height: 36px; background-position: -210px 0; background-size: 400px 450px; transform-origin: 12px 100%; } 

.cs_mapbridge .map_marker.tvhp_big .ico { width: 38px; height: 58px; background-position: -220px -45px; background-size: 400px 450px; transform-origin: 19px 54px; } 

.cs_mapbridge .map_marker.tvhp_big .shd { top: 24px; left: 8px; width: 38px; height: 34px; background-position: -220px -105px; background-size: 400px 450px; } 

.cs_mapbridge .crs .map_marker[class*=_big] .shd { top: 24px; left: 8px; width: 38px; height: 34px; background-position: -50px -270px; background-size: 400px 450px; } 

.cs_mapbridge .crs .map_marker .ico { width: 25px; height: 36px}

.cs_mapbridge .crs .map_marker.num1 .ico { background-position: -5px -215px; background-size: 400px 450px; transform-origin: 12px 100%; } 

.cs_mapbridge .crs .map_marker.num2 .ico { background-position: -35px -215px; background-size: 400px 450px; transform-origin: 12px 100%; } 

.cs_mapbridge .crs .map_marker[class*=_big] .ico { width: 38px; height: 58px}

.cs_mapbridge .crs .map_marker.num1_big .ico { background-position: -160px -215px; background-size: 400px 450px; transform-origin: 19px 54px; } 

.cs_mapbridge .crs .map_marker.num2_big .ico { background-position: -205px -215px; background-size: 400px 450px; transform-origin: 19px 54px; }

저작자표시 비영리 변경금지

Lpla 개발 블로그