npm install --save google-maps-react

import {GoogleApiWrapper} from 'google-maps-react';
// ...
export class MapContainer extends React.Component {}
export default GoogleApiWrapper({
  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)

export default GoogleApiWrapper(
  (props) => ({

npm init react-app my-app

env 파일 2개 생성

.env.development 및 .env.production 그리고 프로젝트 폴더(src 폴더가 아님)에 넣습니다.
거기에 액세스 키를 저장하여 REACT_APP_API_KEY와 같은 모든 변수의 시작 부분에서 REACT_APP를 사용해야 한다는 것을 인식하고 액세스 키와 동일하게 설정하는 env var를 추가할 수 있습니다.

REACT_APP_API_KEY = access_key

** .gitignore 해당 파일에서 git add로 코드를 업로드했는지 기억하십시오.

1. 컴포넌트에 useRef 추가

향후 코드에서 요소 참조를 가져와야 하므로 useRef가 필요합니다.

const googleMapRef = useRef();
<div
     id="google-map"
     ref={googleMapRef}
    style={{ width: '400px', height: '300px' }}/>

2. useEffect를 작성하여 스크립트 로드 구현

구성요소 렌더링 후 Google 지도 스크립트를 로드하려고 하기 때문에 여기서는 useEffect를 사용합니다.

useEffect(() => {
    const googleMapScript = document.createElement('script');
    googleMapScript.src=`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_API_KEY}&libraries=places`;
    googleMapScript.async = true;
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener('load', () => {
                        getLatLng();
                    });
                })
},[])
you can add at the end of the src &language=en to be only English without this it will be localized.

3. 구글 지도 기능 만들기

여기에서 ref에서 요소로 지도를 인쇄하는 코드를 확인합니다.

    const createGoogleMap = (coordinates) => {
        googleMap = new window.google.maps.Map(googleMapRef.current, {
            zoom: 16,
            center: {
                lat: coordinates.lat(),
                lng: coordinates.lng(),
            },
            disableDefaultUI: true,
        })
    };

isableDefaultUI: true 를 추가했는데, 아래 이미지처럼 딸려오는 기본 버튼을 제거하고 싶었기 때문입니다.

4. 지도용 LAT 및 LNG 가져오기

이 방법에서는 위치 장소를 삽입하고 위치의 LAT 및 LNG를 가져오고 결과를 이전 함수에 추가합니다. 또한 보시다시피 마커가 있으므로 위치를 인쇄할 때 위치를 인쇄합니다. 빨간 마커
(마커를 사용하지 않으면 빨간색 마커 없이 위치가 표시됩니다).

    const getLatLng = () => {
        let lat, lng, placeId;
        new window.google.maps.Geocoder().geocode({ 'address': `${placeName}` }, function (results, status) {
            if (status === window.google.maps.GeocoderStatus.OK) {
                placeId = results[0].place_id;
                createGoogleMap(results[0].geometry.location);
                lat = results[0].geometry.location.lat();
                lng = results[0].geometry.location.lng();
                new window.google.maps.Marker({
                    position: { lat, lng },
                    map: googleMap,
                    animation: window.google.maps.Animation.DROP,
                    title: `${placeName}`
                });
                setGoogleMapInfo({ ...GoogleMapInfo, lat, lng, placeId, isLoading: false, googleMap });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

마커 없음:

마커 포함:

5. 하나의 구성 요소에 모든 것을 추가

const GoogleMap = ({ placeName }) => {
  const googleMapRef = useRef();
  let googleMap;
  useEffect(() => {
    const googleMapScript = document.createElement("script");
    googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_API_KEY}&libraries=places`;
    googleMapScript.async = true;
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener("load", () => {
      getLatLng();
    });
  }, []);

  const createGoogleMap = (coordinates) => {
    googleMap = new window.google.maps.Map(googleMapRef.current, {
      zoom: 16,
      center: {
        lat: coordinates.lat(),
        lng: coordinates.lng(),
      },
      disableDefaultUI: true,
    });
  };
  const getLatLng = () => {
    let lat, lng, placeId;
    new window.google.maps.Geocoder().geocode(
      { address: `${placeName}` },
      function (results, status) {
        if (status === window.google.maps.GeocoderStatus.OK) {
          placeId = results[0].place_id;
          createGoogleMap(results[0].geometry.location);
          lat = results[0].geometry.location.lat();
          lng = results[0].geometry.location.lng();
          new window.google.maps.Marker({
            position: { lat, lng },
            map: googleMap,
            animation: window.google.maps.Animation.DROP,
            title: `${placeName}`,
          });
        } else {
          alert(
            "Geocode was not successful for the following reason: " + status
          );
        }
      }
    );
  };
  return (
    <div
      id="google-map"
      ref={googleMapRef}
      style={{ width: "400px", height: "300px" }}
    />
  );
};

거기다 쉽죠!!

보시다시피 매우 쉽고 이 라이브러리를 사용할 필요가 없으며 혼자서 모든 작업을 수행할 수 있습니다.
placeName 이름에 "Kennedy Space Center Historic Launch Complex 39A"와 같은 이름을 넣으십시오.

흥미롭고 도움이 되었기를 바랍니다.
이것은 나의 첫 번째 기사이며 읽기 환경을 개선하고 더 잘 작성하는 방법을 위해 내가 할 수 있는 리뷰와 물건을 얻게 되어 기쁩니다.