[react-google-maps/api] 구글맵 사용하기, marker, circle, env

이번 기업협업을 하면서 처음으로 구글맵을 사용해봤다.

위코드에서 부트캠프할 때 구글맵을 하다가 어려워서 카카오맵으로 간 동기들을 보았기 때문에 걱정을 좀 했지만

다행히 구글맵을 깊게 다루지는 않아서 구현할 수 있었다.

이런식으로 카메라 위치와 주변 반경을 표시해주었다.

---

1. 구글맵 사용하기

npm i -S @react-google-maps/api

리액트 구글맵을 다운받아준다. 

https://www.npmjs.com/package/@react-google-maps/api

@react-google-maps/api

import React from 'react';
import {
  GoogleMap,
  useLoadScript,
} from '@react-google-maps/api';

export default function AreaDetailMap({ areaMapData }) {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP,
    // 이 부분은 key를 입력하는 부분인데 
    // google api key값 같은 민감한 정보를 관리햐야할때는 .env를 사용해야합니다. 
    // 아래 참고할 블로그 링크 걸어두었습니다.
  });

  const isData = areaMapData.length !== 0;
  if (!isData) return <div>로딩중입니다.</div>;

  if (!isLoaded) return <div>Loading...</div>;
  return <Map areaMapData={areaMapData} />;
}

function Map({ areaMapData }) {
  const center = {
    lat: Number(areaMapData.latitude),
    lng: Number(areaMapData.longitude),
  };

  const containerStyle = {
    width: 'auto',
    height: '300px',
  };

  const options = {
    strokeColor: '#FFE600',
    strokeOpacity: 0.3,
    strokeWeight: 1,
    fillColor: '#FFE600',
    fillOpacity: 0.3,
    clickable: false,
    draggable: false,
    editable: false,
    visible: true,
    radius: 80,
    zIndex: 1,
  };

  return (
    <GoogleMap
      zoom={17}
      center={center}
      mapContainerStyle={containerStyle}
      mapTypeId="satellite"
    >
    </GoogleMap>
  );
}

어느 구역이냐에 따라 지도의 위도, 경도가 바뀌어야해서

areaMapdata에 backend에게 받아오는 위도, 경도 값이 담겨있다.

구글맵의 기본은 useLoadScript, GoogleMap이고

mapTypeId를 satellite로 해준 것은 지도를 위성을 디폴트 값으로 설정하고 싶었기 때문이다.

 

위에까지하면 이렇게 지도가 그려질 것이다!

u

---

2. Marker, Circle 

marker와 circle도 간단하다. marker와 circle을 import 해주면 된다.

나는 marker의 icon 모양을 cctv 이미지로 하고싶어서 cctv도 import 했다.

import {
  GoogleMap,
  useLoadScript,
  Circle,
  Marker,
} from '@react-google-maps/api';
import cctv from '../../../assets/images/cctv.svg';

 

그리고 어디에 marker를 할건지 , 어디를 circle의 중심으로 할건지, circle의 폭과 컬러 등을 선언해주면 된다.

function Map({ areaMapData }) {
  const center = {
    lat: Number(areaMapData.latitude),
    lng: Number(areaMapData.longitude),
  };

  const marker = { //marker 위도, 경도 선언
    lat: Number(areaMapData.cam_latitude),
    lng: Number(areaMapData.cam_longitude),
  };

  const containerStyle = {
    width: 'auto',
    height: '300px',
  };

  const options = { // circle의 옵션들
    strokeColor: '#FFE600',
    strokeOpacity: 0.3,
    strokeWeight: 1,
    fillColor: '#FFE600',
    fillOpacity: 0.3,
    clickable: false,
    draggable: false,
    editable: false,
    visible: true,
    radius: 80,
    zIndex: 1,
  };

  return (
    <GoogleMap
      zoom={17}
      center={center}
      mapContainerStyle={containerStyle}
      mapTypeId="satellite"
    >
      <Marker position={marker} icon={cctv} />
      <Circle center={center} options={options} />
    </GoogleMap>
  );
}

짠 marker와 circle도 그려냈다.

---

3. env (환경변수) 설정하기

https://webcorgi.tistory.com/48

React에서 .env 파일에 환경변수 넣어쓰기

이 블로그를 참고했다.

 

---

4.  여러 참고한 사이트

https://github.com/JustFly1984/react-google-maps-api

GitHub - JustFly1984/react-google-maps-api: React Google Maps API

https://react-google-maps-api-docs.netlify.app/

React Google Maps Api Style Guide

---

나는 간단한 부분이어서 구현할 수 있었지만 

구글맵을 더 깊게 들어가보면 더 새로운 세상이 펼쳐질 것 같다.

더 깊게 들어가봐야겠다.😊