네이버 api

애증의 네이버 지도 API... Swift로 프로젝트 할 때 사용해 본 경험이 있는데,

Swift에 대한 자료가 많지 않다보니 많이 헤맸던 기억이 난다.

겨우겨우 마커 표시와, 마커 색 바꾸기, 처음 앱 실행시 현재 위치 표시하기를 했었는데,

이번엔 Web으로 네이버 지도 API를 사용하게 되었다.

 

한 개의 포스팅으로 지도라는 광범위한 분야를 다루기에는 버거울 것 같아 

이번 포스팅에서는 지도를 띄우는 것까지 작성해보려고 한다.

제일 기본적인 지도 띄위는 방법은 크게

1. 네이버 클라우드 플랫폼 회원가입
2. 콘솔 접속
3. Maps 선택
4. Client ID 발급
5. Web Dynamic Map v3에서 코드 복사하기

다섯 가지로 볼 수 있다.

먼저,

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

www.ncloud.com/

NAVER CLOUD PLATFORM

이 사이트에 회원가입을 한다

회원가입 후 로그인 하면

 

다음과 같은 화면을 볼 수 있다. 

여기서 오른 쪽 위의 console에 들어간다.

 

콘솔 접속

콘솔의 왼쪽 사이드 바에보면 Products & Services 메뉴가 있다

이 메뉴로 들어간 후 AI-NAVER API를 선택한다.

AI-NAVER API 탭에 들어가면 다음과 같은 화면을 볼 수 있다

Maps 선택

여기서 Application 등록을 선택한 후 Web Dynamic Map을 선택한다

여기서 기억할 점은

네이버 지도 API종류는 크게 세가지가 있는데

1. Web에서 사용하는 경우, Web Dynamic Map
2. Mobile에서 사용하는 경우, Mobile Dynamic Map,
3. REST API를 활용하여 이미지로 지도를 그리는 Static Map,

이렇게 세가지가 있다!🧐

Web Dynamic Map을 선택한 후 아래의 서비스 환경 등록을 해 준다.

나의 경우 heroku에 앱을 배포할 예정이었기 때문에 heroku에서 만든 앱 주소를 적어주었다.

heroku 앱 만들기와 배포 방법은 여기서 확인할 수 있다.

winteri-i.tistory.com/6

Spring Project를 Heroku 에 deploy하기 - Spring/ Heroku

Client ID 발급

Application 등록을 마치면 이렇게 인증 정보를 확인할 수 있는데 여기서 Client ID를 확인할 수 있다.

Web Dynamic Map v3에서 코드 복사하기

navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html

NAVER Maps API v3

Naver Maps API v3 사이트에 들어가서 아래의 코드를 복사 붙여넣기 한 후 YOUR_CLIENT_ID에 인증 정보에서 확인한 Client ID를 넣어준다.

나의 경우 spring project를 생성하고 jsp 파일에 복사 붙여넣기를 하였다

파비콘이 넣고싶어 파비콘 생성도하고~

 

heroku에 배포 후 앱을 실행시켰더니

다음과 같은 결과를 얻을 수 있었다😄

다음 포스팅에서는 검색과 위치이동을 공부해야겠다!

---

1.

네이버 api

https://d2.naver.com/helloworld/3380225

네이버 api css 수정방법

https://blog.hyungsub.com/entry/%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-API-%ED%99%9C%EC%9A%A9-%EC%A7%80%EC%97%AD%EC%A0%95%EB%B3%B4-%EC%98%A4%EB%B2%84%EB%A0%88%EC%9D%B4-%EC%82%BD%EC%9E%85-%EB%B0%A9%EB%B2%95

네이버 지도 API 활용 지역정보 오버레이 삽입 방법

네이버 지도에서 기본적으로 제공하는 정보창을 표시하는 것은 기본 기능으로 제공하지 않는 것으로 보이며, 이를 구현하기 위해서는 다음과 같이 네이버 API 문서에서 제공하는 것과 같이 커스텀 디자인으로 구현이 필요한 것으로 보인다.

 

var HOME_PATH = window.HOME_PATH || '.';
var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147),
    map = new naver.maps.Map('map', {
        center: cityhall,
        zoom: 10
    }),
    marker = new naver.maps.Marker({
        map: map,
        position: cityhall
    });

var contentString = [
        '<div class="iw_inner">',
        '   <h3>서울특별시청</h3>',
        '   <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br />',
        '       <img src="'+ HOME_PATH +'/img/example/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br />',
        '       02-120 | 공공,사회기관 &gt; 특별,광역시청<br />',
        '       <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
        '   </p>',
        '</div>'
    ].join('');

var infowindow = new naver.maps.InfoWindow({
    content: contentString,
    maxWidth: 140,
    backgroundColor: "#eee",
    borderColor: "#2db400",
    borderWidth: 5,
    anchorSize: new naver.maps.Size(30, 30),
    anchorSkew: true,
    anchorColor: "#eee",
    pixelOffset: new naver.maps.Point(20, -20)
});

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

 

infowindow 객체의 속성들을 수정함으로써 기본 말풍선의 디자인을 수정할 수 있으며, content에 들어가는 마크업 언어를 수정함으로써 내용과 스타일의 커스텀이 가능하다. 스타일을 할당해 CSS를 수정함으로써 디자인 수정이 가능하다.

참고자료

NAVER Maps API v3

NAVER Maps API v3

 

---

2.

navermaps.github.io/maps.js.ncp/docs/tutorial-3-geocoder-geocoding.example.html

NAVER Maps API v3

 

 

주소와 좌표 검색 API 사용하기

 

Geocoder 서브 모듈의 Service 객체를 사용하여 주소로 좌표를 검색하거나(Geocode) 좌표로 주소를 검색하는(Reversegeocode) 예제입니다.
입력 창에 주소를 입력하여 검색하면 해당 주소의 좌표로 이동하며, 지도를 클릭하면 해당 지점의 경위도 좌표로 주소를 검색합니다.
Geocode API의 자세한 응답값은 Geocode API를 참고하세요.
Reversegeocode API의 자세한 응답값은 ReverseGeocode API를 참고하세요.

 

 

api 를 통해 주소값을 통해서 위치를 지정해 주는 방식이다. 

 

페이지 화면이 로딩되면 searchAddressToCoordinate('정자동 178-1'); 주소 검색값으로 해당 위치로 이동해 준다.

 

 

/**
 * 스크립트 로드
 * <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=geocoder"><\/script>
 */

var map = new naver.maps.Map("map", {
  center: new naver.maps.LatLng(37.3595316, 127.1052133),
  zoom: 15,
  mapTypeControl: true
});

var infoWindow = new naver.maps.InfoWindow({
  anchorSkew: true
});

map.setCursor('pointer');

function searchCoordinateToAddress(latlng) {

  infoWindow.close();

  naver.maps.Service.reverseGeocode({
    coords: latlng,
    orders: [
      naver.maps.Service.OrderType.ADDR,
      naver.maps.Service.OrderType.ROAD_ADDR
    ].join(',')
  }, function(status, response) {
    if (status === naver.maps.Service.Status.ERROR) {
      if (!latlng) {
        return alert('ReverseGeocode Error, Please check latlng');
      }
      if (latlng.toString) {
        return alert('ReverseGeocode Error, latlng:' + latlng.toString());
      }
      if (latlng.x && latlng.y) {
        return alert('ReverseGeocode Error, x:' + latlng.x + ', y:' + latlng.y);
      }
      return alert('ReverseGeocode Error, Please check latlng');
    }

    var address = response.v2.address,
        htmlAddresses = [];

    if (address.jibunAddress !== '') {
        htmlAddresses.push('[지번 주소] ' + address.jibunAddress);
    }

    if (address.roadAddress !== '') {
        htmlAddresses.push('[도로명 주소] ' + address.roadAddress);
    }

    infoWindow.setContent([
      '<div style="padding:10px;min-width:200px;line-height:150%;">',
      '<h4 style="margin-top:5px;">검색 좌표</h4><br />',
      htmlAddresses.join('<br />'),
      '</div>'
    ].join('\n'));

    infoWindow.open(map, latlng);
  });
}

function searchAddressToCoordinate(address) {
  naver.maps.Service.geocode({
    query: address
  }, function(status, response) {
    if (status === naver.maps.Service.Status.ERROR) {
      if (!address) {
        return alert('Geocode Error, Please check address');
      }
      return alert('Geocode Error, address:' + address);
    }

    if (response.v2.meta.totalCount === 0) {
      return alert('No result.');
    }

    var htmlAddresses = [],
      item = response.v2.addresses[0],
      point = new naver.maps.Point(item.x, item.y);

    if (item.roadAddress) {
      htmlAddresses.push('[도로명 주소] ' + item.roadAddress);
    }

    if (item.jibunAddress) {
      htmlAddresses.push('[지번 주소] ' + item.jibunAddress);
    }

    if (item.englishAddress) {
      htmlAddresses.push('[영문명 주소] ' + item.englishAddress);
    }

    infoWindow.setContent([
      '<div style="padding:10px;min-width:200px;line-height:150%;">',
      '<h4 style="margin-top:5px;">검색 주소 : '+ address +'</h4><br />',
      htmlAddresses.join('<br />'),
      '</div>'
    ].join('\n'));

    map.setCenter(point);
    infoWindow.open(map, point);
  });
}

function initGeocoder() {
  if (!map.isStyleMapReady) {
    return;
  }

  map.addListener('click', function(e) {
    searchCoordinateToAddress(e.coord);
  });

  $('#address').on('keydown', function(e) {
    var keyCode = e.which;

    if (keyCode === 13) { // Enter Key
      searchAddressToCoordinate($('#address').val());
    }
  });

  $('#submit').on('click', function(e) {
    e.preventDefault();

    searchAddressToCoordinate($('#address').val());
  });

  searchAddressToCoordinate('정자동 178-1');
}

naver.maps.onJSContentLoaded = initGeocoder;
naver.maps.Event.once(map, 'init_stylemap', initGeocoder);

그 이외에 더 많은 샘플 예제

 

navermaps.github.io/maps.js.ncp/docs/tutorial-digest.example.html

NAVER Maps API v3