Google Map 만들기 2

1부에 이어, 2부에서는 Map Component를 그리고, 지도가 표출되도록 하겠습니다.

 

이에 앞서 1부에서 CRA를 통해 설치 된 리액트 버전이 v18인데 v17로 다운그레이드 하겠습니다.

 

* 참고 자료

https://homubee.tistory.com/36

[React] 리액트 버전 낮추기(변경/다운그레이드) + 오류 해결

1부에서 설치되지 않았던 @mui/styles를 설치하겠습니다.

D:\workspace_vscode\react_google_map> npm install @mui/styles

 

/src/component/Map 하위에 styles.js 파일을 추가하고 여기에 Map.js의 css를 구성하겠습니다.

// styles.js

import { makeStyles } from "@mui/styles";

export default makeStyles(() => ({
  paper: {
    padding: "10px",
    display: "flex",
    flexDirection: "columns",
    justifyContent: "center",
    width: "100px",
  },
  mapContainer: {
    height: "85vh",
    width: "100%",
  },
}));

// Map.js

import React from "react";
import GoogleMapReact from "google-map-react";

import useStyle from "./styles";

const Map = () => {
  const classes = useStyle();
  const cordinates = { lat: 0, lng: 0 };
  return (
    <div className={classes.mapContainer}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "" }}
        defaultCenter={cordinates}
        center={cordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={""}
        onChange={""}
        onChildClick={""}
      ></GoogleMapReact>
    </div>
  );
};

export default Map;

google-map-react 라이브러리를 import 하고, 위와 같이 작성해줍니다.

bootstrapURLKeys 부분의 key 값에 대해서는 google project를 만들어 key값을 받아와야 합니다.

(발급방법은 자세히 설명 된 타글을 링크해놓겠습니다.)

* 참고자료

https://velog.io/@sukqbe/API-%EA%B5%AC%EA%B8%80-%EC%A7%80%EB%8F%84Google-Map-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-API-Key-%EB%B0%9C%EA%B8%89%EB%B0%9B%EA%B8%B0-qumur49u

[API] 구글 지도(Google Map) 추가하기 (+ API Key 발급받기)

 

위와같이 작성 후 프로젝트를 실행하면 아래와 같이 화면이 뜹니다.

해당 알림창은 우리가 아직 key값을 부여하지 않았기에 뜨는 내용이며, 지도를 최소로 축소하면 다음과 같이 지도가 정상적으로 뜨고있음을 알 수 있습니다.

 

 

 

* 참고 자료

https://www.npmjs.com/package/google-map-react

google-map-react

https://velog.io/@jhs000123/%EB%A6%AC%EC%95%A1%ED%8A%B8-googlemap%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8

리액트 - googlemap을 이용한 프로젝트