지도 api 비교하기 (2) (네이버 지도 api)

Y b·2024년 4월 4일

TIL

지도 api 비교하기

목록 보기

2/3

서론

공공데이터 api를 활용한 웹앱을 만드는 공모전을 준비하던 중에,
세부페이지에 지도가 들어가서 지도 api를 적용하고자 했다.

3d 지도는 해봤지만 다른 팀원과 같이 했던 터라
2d 지도를 꼭 구현해보고 싶었는데 좋은 기회였다.

그래서 하는 김에 하나로 바로 정하지 않고 다 적용해보고
어떤 api가 제일 좋을지 3가지를 두고 고민해보고자 했다.

비교할 api 및 기술스택

이용할 기술스택
react, typescript, styled-components

네이버 지도 api

https://www.ncloud.com/product/applicationService/maps

다른 지도들과 비교하면 공식문서가 조금 정보가 분산되어 있다는 느낌이 들었다.
카카오와 마찬가지로 유료이지만 크레딧을 주는 것은 이점이었다.
또한 typescript를 지원하는 점도 장점이다. 다만 아직 제대로 이용하지 못해서 와닿지는 않는다.

-간단하게 가져오기
공식문서 가이드:
https://guide.ncloud-docs.com/docs/ko/naveropenapiv3-application
Map 공식문서 가이드:
1- api
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
2- map 이용
https://navermaps.github.io/maps.js.ncp/docs/tutorial-Map.html

1)api 키 가져오기
네이버로 로그인 및 회원가입을 하고, 결제수단을 등록해야 했다.
https://console.ncloud.com/naver-service/application 여기에서 어플리케이션을 등록하되,

여기에서 maps에서 사용한 것을 선택해야 하는데 web앱을 만드는 경우는 web dynamicMap과 geocoding을 선택하는 것을 추천한다.
추후를 위해 일단 Maps를 모두 선택하면
서비스환경 중 모바일 관련도 다 적어야 해서(빈칸 없이 넘어갈 수 없는유효성 검사로 인해) 헤맬 수 있다.(서비스 환경 정보를 확인해 주세요. 알림)

2)index.html에 스크립트 추가
.env에 CLIENT_ID를 등록한다.

아까 api 등록하고 인증정보를 들어가면 clientid를 볼 수 있는데
.env에 등록하고 꼭 .gitignore에 .env를 등록한다.

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

위처럼 api 키를 적용하고, index.html에 스크립트 추가한다.

3)지도 생성 코드

//공식문서
...윗부분 생략
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<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>

바닐라 자바스크립트에서 리액트로 적용하기 때문에 useRef를 이용하여
dom을 선택하며 보여질 지도의 좌표 및 옵션을 조정하여 적용한다.
useEffect를 이용하여 활용한다.

다만 이렇게 가져오면 잠시 undefined로 적용이 안될 수도 있는데
.env를 적용하고 vscode를 다시 껐다 키고 api 신청 후 시간이 조금 걸릴 수 있으므로
다른 설정들을 살펴보고 30분 후에도 적용이 안된다면 원인을 다시 찾아보는 것을 추천한다.

//리액트로 변형
declare global {
  interface Window {
    naver: any;
  }
}
const Map = () => {
  const mapRef = useRef(null);
  const { naver } = window;
  const location = new naver.maps.LatLng(37.5666103, 126.9783882);
  const mapOptions = {
    // 지도의 초기 중심 좌표
    center: location,
    zoom: 14, // 지도의 초기 줌 레벨
  };
  useEffect(() => {
    const map = new naver.maps.Map(mapRef.current, mapOptions);
  }, []);
  return (
    <div>
    <div id="map" ref={mapRef} style={{ width: '1143px', height: '594px' }} />
    </div>
  );
};

export default Map;

참고 블로그 : https://velog.io/@calendar2/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EB%84%A4%EC%9D%B4%EB%B2%84%EC%A7%80%EB%8F%84-api-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B01

최종 코드

보여지는 옵션 추가하여 ui 설정을 바꾸고,
코드를 추가하여 마커도 추가 가능하였다.
간단하게 구성한 것으로 type 지정은 우선 any로 놔두었다.

/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect, useRef } from 'react';

declare global {
  interface Window {
    naver: any;
  }
}
// NAVER 지도 API 타입 정의 파일은 NPM 패키지(@types/navermaps)를 통해 설치할 수 있습니다.
// let map: naver.maps.Map;

const Map = () => {
  const mapRef = useRef(null);
  const { naver } = window;
  const location = new naver.maps.LatLng(37.5666103, 126.9783882);
  const mapOptions = {
    // 지도의 초기 중심 좌표
    center: location,
    logoControl: false, // 네이버 로고 표시 X
    mapDataControl: false, // 지도 데이터 저작권 컨트롤 표시 X
    scaleControl: true, // 지도 축척 컨트롤의 표시 여부
    tileDuration: 200, // 지도 타일을 전환할 때 페이드 인 효과의 지속 시간(밀리초)
    zoom: 14, // 지도의 초기 줌 레벨
    zoomControl: true, // 줌 컨트롤 표시
    zoomControlOptions: { position: 9 }, // 줌 컨트롤 우하단에 배치
  };
  useEffect(() => {
    const map = new naver.maps.Map(mapRef.current, mapOptions);
    const marker = new naver.maps.Marker({
      position: location,
      map: map,
    });
  }, []);
  return (
    <div>
      <div id="map" ref={mapRef} style={{ width: '1143px', height: '594px' }} />
    </div>
  );
};

export default Map;