호롱호롱불
20
2021-01-19 13:48:56
4
264

[네이버 API] 네이버 지도 API 관련 질문 드립니다.


안녕하세요.

개발 해보려고 하는데 자바스크립트 등등 웹 개념이 많이 부족한 상태지만 만들면서 알 수 있을 거라고 생각하고 시작을 하였습니다.

그런데 시작부터 이해가 안되는 상황이라 이곳에 도움을 구합니다 ㅠ 


[개발하고자 하는 것]

아직 DB가 없어서 간단하게 주소가 입력된 엑셀 파일을 읽어 해당 주소에 해당하는 위치 전체에 마커 찍고 관련된 정보를 표시하려고 합니다.


[질문]

1. 네이버 API를 통해서 지도를 출력하는 것과 주소를 위도와 경도로 바꾸어야 해당 위치를 표시할 수 있을 것 같아 해보려고 합니다.

아래는 네이버 지도API에서 위도경도를 바꾸는 예제에서 head 부분만 조금 변경한 거라 별 차이가 없는데 표시가 안되네요...


*네이버에서 WEB Dynamic Web과 Geocoding은 신청 완료하였습니다.

(코드에서 클라이언트ID는 일부러 수정하였습니다.)


(코드)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>지도</title>      
        <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=CLIENT_ID&submodules=geocoder"></script>
    </head>
    <body>
        <script>
            var mapOptions = {
            center: new naver.maps.LatLng(37.5238798126.9635801),
            zoom: 19,
            mapTypeControl: true
            };

            var map = new naver.maps.Map("map"mapOptions);


            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(statusresponse) {
                    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(maplatlng);
            });
            }


            function searchAddressToCoordinate(address) {
                naver.maps.Service.geocode({
                    query: address
                }, function(statusresponse) {
                    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.xitem.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(mappoint);
                });
            }


            // 첫 화면 시작 함수
            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);


        </script>


    </body>


</html>


(콘솔 로그)

A parser-blocking, cross site (i.e. different eTLD+1) script, https://openapi.map.naver.com/openapi/v3/maps-geocoder.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.


도대체 왜 그런것인지 잘 모르겠네요. 검색으로도 잘 나오지 않는터라... 도움을 부탁드립니다.


2. 엑셀에 첫번째 sheet에 A행에 주소, B행에 기타정보가 입력되어 있으면 자바스크립트로 엑셀 정보를 읽어서 행마다 정보를 컨트롤 할 수 있나요?


도움 부탁드립니다.

0
  • 답변 4

  • sonshinchul
    893
    2021-01-19 14:50:09 작성 2021-01-19 14:51:10 수정됨

    1.네이버 API 지도를 써보지 않아서 정확히는 모르겠으나 에러 문구 보니 CROSS-ORIGIN 뜨네요.

    뭔가 인증 코드가 제대로 넘어가지 않았거나 잘못된 인증코드 넘긴거 같은데요..


    2.JAVA,C#등 다 가능합니다. 자바스크립트도 찾아보면 가능할거에요.


    PS. 글씨 폰트 색상이 보기 너무 어려워요..



  • 호롱호롱불
    20
    2021-01-19 15:07:40 작성 2021-01-19 15:08:40 수정됨

    답변 감사합니다.

    먼저...


    1. 그 인증 그것인가요? ㅠ

    사실 저 방법 전에 xmlhttprequest로 하려고 했더니 위 말씀하신 CORB 가 검색 결과로 나오더라구요.

    사실 CORB가 왜 그런지는 모르겠으나 요청의 요청으로 받을 수 없어 BACKEND를 통해서 받으면 된다 이런 답변이 있는데 별도 서버가 없어 찾아보니 저렇게 SUB로 요청하면 받을 수 있는 것으로 확인하였습니다.

    ncp 측에도 문의 했는데 발급된 키값을 잘 넘겨줬거든요? ㅠㅠ NCP측에서는 Document.write 이게 문제라는 식으로 답변을 주어가지고... 도대체가 잘 모르겠네요 ㅠㅠ


    2. 감사합니다. 파이썬의 경우에는 pandasql로 쿼리로 컨트롤이 가능했는데 웹은 너무 예전에 해본터라 되는지 안되는지 기억조차... 잘 찾아보면 될 것 같습니다.


    PS. 이건 죄송합니다.... 그냥 복붙하였는데 검은 바탕인데 업로드는 다시 흰색으로 보이네요..



  • yeori
    1k
    2021-01-19 15:52:20

    아마 navermaps 공식 깃허브에서 에제를 가져오신거 같은데, 아래 사이트요...

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

    올리신 코드는 정상적으로 돌아가는 완벽한 코드가 아닙니다. body 태그 안에 id가 "map"인 element를 아래와 같이 정의해야 합니다.

    <body>
      <div id="map"></div><!-- 스크립트 전에 등장시켜야함 -->
      <script>
         // 지도 초기화 코드
      </script>
    </body>

    지도가 그려질 element가 없으니 스크립트는 그냥 실패할 수 밖에 없습니다.


    그러니까, 보통 이런 경우는 문서를 제대로 보지 않은 사람의 잘못이라고 말하는데, 네이버 공식 문서에 한정해서는 읽는 사람을 탓할 수가 없을 정도로 얘네들 문서가 엉망입니다.


    공식 깃허브 사이트 들어가서 [시작하기]를 보면 아래와 같이 섹션이 나뉘어있는데..

    * Hello Word

    * 지도 DOM 요소 지정하기

    * 지도 생성하기

    골때리게도 지도 생성하기 문서에서는 dom 선언을 빼먹고 있습니다.

    네이버클라우드 플랫폼, 공공기관용

    <body>
        <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&callback=initMap"></script>
        <script type="text/javascript">
            var map = null;
    
            function initMap() {
                map = new naver.maps.Map('map', {
                    center: new naver.maps.LatLng(37.3595704, 127.105399),
                    zoom: 10
                });
            }
        </script>
    </body>

    * 왜 이 코드에서는 dom을 빼놨냐? 그거 한줄 적는게 그렇게 복잡하냐?

    심지어 [Examples] 섹션에 몇개 안돼는 예제를 보면 완전히 돌아가는 전체 코드를 첨부한게 아니라, 니들이 알아서 긁어다 맥락에 맞게 쓰라는 식의 엉성한 샘플 코드를 올려뒀습니다.

    그러면 완전히 작동하는 코드는 어디에 있냐?

    메뉴에 조그맣게 [포크하기]라고 쓰여있는 링크를 클릭하면 깃허브 저장소로 넘어갑니다.

    지도 문서만 이런게 아니라 naver cloud service 설명문서 api 문서 보면 죄다 이런식입니다. 진짜 90년도 공무원들이 적어놓은것처럼 "니들이 알아서 갖다써" 이거임...


  • 호롱호롱불
    20
    2021-01-19 16:03:13


    헛.. 답변 감사합니다.

    적어주신 글로 제가 다시 살펴보겠습니다.


    제대로 보지 못한 제 잘못도 있어요.

    네이버 공식 예제니까 돌아가야되는데 내가 무슨 세팅을 잘못했나? 이렇게만 접근을 해가지고...

    너무 감사합니다.



  • 로그인을 하시면 답변을 등록할 수 있습니다.