#네이버 지도로 위치정보 보여주기

추가로 지급된 강의 웹개발플러스에 네이버 지도 API를 사용하는 부분이 있었고,

이전 기수의 미니프로젝트에도 지도 사용한 걸 봐서 네이버 지도는 꼭 사용해보고 싶었다.

 

사실 손을 댄건 2일차부터였는데, 시도하다가 중간 중간에 막히기도 했고, 당장 해야할 것들이 먼저 눈에 들어와서 제대로 못하고 있었다.

 

급한 부분들은 거의 완료가 된 상태라서 다시 시도하였다.

나중에 생각해보면 일과 끝나고 9시 이후나, 따로 시간을 분배해서 쭉 시도했으면 더 좋았을 것 같다.

 

- 선택한 지역의 전체 서점들을 지도로 표시하는 것

- 책방 세부정보에 개별 지도를 넣는 것 중에 고민했는데,

세부정보 페이지에 공간이 많이 남기도 했고, 후자가 조금 더 간단해 보여서 시도하였다.

 

세부정보 페이지에 이미 서버에서 책방 목록 정보를 받아오는 부분이 있어서 그 밑에 네이버지도를 불러오는 함수를 추가하였다. 

    {#지도에 필요한 변수 지정#}
    let y_cen = infos['LAT']  // lat
    let x_cen = infos['LOGT']  // long
    {#지도 만들기#}
    map = new naver.maps.Map('map', {
        center: new naver.maps.LatLng(y_cen, x_cen),
        zoom: 15,
        zoomControl: true,
        zoomControlOptions: {
            style: naver.maps.ZoomControlStyle.SMALL,
            position: naver.maps.Position.TOP_RIGHT
        }
    });
    {#마커 만들기#}
    let marker = new naver.maps.Marker({
        position: new naver.maps.LatLng(infos["LAT"], infos["LOGT"]),
        map: map
    });
    markers.push(marker)
    return marker
}

지도의 크기는 style에 넣고

#map {
    width: 50vh;
    height: 40vh;
    margin: 20px auto 20px auto;
}

body에 지도 위치를 표시하였다.

<div id="map"></div>

그리고 head에 필요한 정보들을 추가하였다.

네이버 지도 API는 사용하기 편리하게 되어있어서, 필요한 부분에 함수와 세부 속성들만 잘 넣어주면 되는 것 같다.

 

네이버지도 API URL 중에 client ID를 넣는 부분이 있는데, 네이버 클라우드 플렛폼(https://www.ncloud.com/?language=ko-KR)에서 application을 등록하고 생성된 아이디를 넣으면 된다.

API 인증 문제가 계속 발생해서 지도가 제대로 표시가 되지 않았다.

인증정보를 등록할 때, 서비스 URL에 ip주소가 아닌 도메인을 입력했을 때는 잘 작동하는 것을 확인하였다.