2월18일 - Naver Maps API

개요

프로젝트에서 지도 API를 사용해봐야 하는데

카카오 맵 API는 옛날에 한 번 써봐서 이번에는 네이버 맵 API를 써보고 싶어 공부해봤다.

 

당장 ejs 상에서 할지 react 상에서 할지 정해진게 아니라 일단 react에서 연습해봤음

 

사용방법

https://console.ncloud.com/naver-service/application

일단 Client ID를 발급 받아야한다.

네이버 클라우드 가입/로그인 후에 Application 탭에 가서 등록하면 위와 같이 앱 목록에 나오게 되는데

인증 정보에서 Client ID를 확인할 수 있다.

 

public/index.html

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

react 프로젝트의 public 폴더에 있는 index.html에 사진과 같이 script를 세팅해준다.

이로써 사용 준비가 끝났다.

 

코드

import { useEffect, useRef } from 'react';

const MapNaverDefault = () => {
  const mapElement = useRef(null);
  const { naver } = window;

  useEffect(() => {
    if (!mapElement.current || !naver) return;

    // 지도에 표시할 위치의 위도와 경도 좌표를 파라미터로 넣어줍니다.
    const location = new naver.maps.LatLng(37.5656, 126.9769);
    const mapOptions = {
      center: location,
      zoom: 17,
      zoomControl: true,
    };

    const map = new naver.maps.Map(mapElement.current, mapOptions);
    new naver.maps.Marker({
      position: location,
      map,
    });
  }, []);

  return (
    <>
      <h1>Naver Map - Default</h1>
      <div ref={mapElement} style={{ minHeight: '400px' }} />
    </>
  );
};

export default MapNaverDefault;

 

공식 문서의 기본 예제와 다른 블로그를 참고해 이렇게 지도를 띄워보았다.

 

여기서 나는 더 나아가 현재 위치를 기준으로 지도가 생성되게 만들어보았다.

 

코드 - 현재 위치

import { useEffect, useRef, useState } from 'react';

const MapNaverCur = () => {
  const mapElement = useRef(null);
  const { naver } = window;

  const [myLocation, setMyLocation] = useState({});

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error);
    }
    if (!mapElement.current || !naver) return;

    const location = new naver.maps.LatLng(myLocation.latitude, myLocation.longitude);
    const mapOptions = {
      center: location,
      zoom: 17,
      zoomControl: true,
    };
    
    const map = new naver.maps.Map(mapElement.current, mapOptions);
    new naver.maps.Marker({
      position: location,
      map,
    });
  }, [mapElement, myLocation]);

  return (
    <>
      <h1>Naver Map - Current Position</h1>
      <div ref={mapElement} style={{ minHeight: '400px' }} />
    </>
  );

  // 위치추적에 성공했을때 위치 값을 넣어줍니다.
  function success(position) {
    setMyLocation({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
    });
  }

  // 위치 추적에 실패 했을때 초기값을 넣어줍니다.
  function error() {
    setMyLocation({ latitude: 37.4979517, longitude: 127.0276188 });
  }
};

export default MapNaverCur;

위 기본 코드에 useState의 활용과 

Geolocation API를 사용해 현재 위치를 쉽게 받아낼 수 있었다.

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

Geolocation API - Web APIs | MDN

 

하지만 사용 시 주의해야할 부분이 있는데네이버 맵 공식 문서를 참고하자면 다음과 같다.

https://navermaps.github.io/maps.js.ncp/docs/tutorial-6-map-geolocation.example.html

NAVER Maps API v3

 

간단히 설명하자면 Chrome 50 버전 이후부턴 HTTP 환경에서 사용이 Deprecate 되어

HTTPS 환경에서만 사용할 수 있는데

http://localhost 에서는 가능하며

임시로 크롬 바로가기를 만들어 조작을 통해 접속이 가능한 방법도 있다고 한다. 자세한건 위에 링크 참고

 

아무튼 이렇게 현재 위치로 지도를 생성해 내 위치까지 확인할 수 있었다.

앞으로 특정 위치에 지도 이동 후 마커 찍는거까지 해봐야 하는데

이미 수많은 슨배님들이 사용해보고 좋은 예제를 올려두어서 금방 할 수 있을 것 같다.

 

위의 예시 코드는 아래 내 GitHub를 통해 확인 가능하다.

https://github.com/cchoseonghun/nestjs_sample/tree/main/frontend_react

GitHub - cchoseonghun/nestjs_sample: Sample Back-End project using Nest.js. with Front-end using ejs or React.js

 

 

 

 

참고한 곳

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

NAVER Maps API v3

https://devkkiri.com/post/57e5af51-374f-4799-a9cb-2bfef2466d7e

리액트에서 naver map api 사용하기 | Kkiri Blog

https://velog.io/@silverbeen/Naver-Map-자유롭게-활용하기

Naver Map 자유롭게 활용하기