네이버 지도 api 활용하기

네이버 지도 등록하기

네이버 클라우드에 web dynamic map을 등록해야한다.
그 후 client_id를 .env 파일에 REACT_APP_NAVER_MAP_CLIENT_ID로 저장한다.

react public index.html 파일에 아래 스크립트를 등록해야한다.

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

네이버 지도 구현

import React, { useEffect, useRef } from "react";

interface Props{
  latitude:number;
  longtitude:number;
}
const MapNaverDefault: React.FC<Props> = ({latitude,longtitude }) => {
  const mapElement = useRef(null);
  const { naver } = window;

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

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

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

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

export default MapNaverDefault;