반응이 있는 Google 지도

오늘은 웹페이지에서 동적 지도를 생성하기 위해 react와 함께 Google 지도를 사용하는 방법을 보여드리겠습니다.

가장 먼저 해야 할 일은 다음 패키지를 설치하는 것입니다.npm i @react-google-maps/api
이에 대한 자세한 내용은 여기에서 확인할 수 있습니다. https://www.npmjs.com/package/@react-google-maps/api

때로는 npm 설치가 끝날 때 --legacy-peer-deps를 종료해야 할 수도 있습니다. google/stackoverflow에서 이에 대한 자세한 내용을 읽을 수 있습니다.

패키지를 설치한 후:
내가 React 구성 요소에 있다고 가정해 보겠습니다.

먼저 아래를 가져올 것입니다.
import {GoogleMap, useLoadScript, Marker} from "@react-google-maps/api"
그런 다음 다음 코드가 필요합니다.const {isLoaded} = useLoadScript({googleMapsApiKey: process.env.REACT_APP_NEXT_PUBLIC_GOOGLE_MAPS_API_KEY})
이 코드는 useLoadScript 후크를 사용하여 Google Maps API 키에 로드하는 것입니다. 일단 로드되면 isLoaded는 진실한 값입니다. Google 공식 문서에서 Google Maps API 키를 만드는 방법에 대해 자세히 알아볼 수 있습니다. 여기서 process.env 부분은 REACT_APP_NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = YOUR_API_KEY가 있는 .env.local 파일을 참조합니다. 이렇게 하는 이유는 API 키를 숨기기 위해서입니다. .env.local 파일을 Github에 푸시하지 않도록 하세요!!!!

다음 코드는 맵 자체를 만드는 곳입니다.

//creating the google map
    //here i'm just initializing a variable called map that will hold the Google Map instance
    let map
    //if our useLoadScript hasn't completed, return "Loading..."
    if(!isLoaded){
        map = <div>Loading...</div>
    //if it is loaded, create the map
    }else{
        map = <GoogleMap zoom={13} center={{lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE}} mapContainerClassName="map-container">

            <Marker position={{lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE}} label="SL"  />
        </GoogleMap>
    }

return (
     <>
          {map}
     </>
)

GoogleMap의 확대/축소는 웹페이지에서 지도가 렌더링될 때 지도에서 확대된 정도입니다. 당신이 좋아하는 것을 실험 할 수 있습니다! 중심은 지도의 중심이 될 위치의 위도, 경도를 가져옵니다. 여기 중앙 위치에지도에 마커도 추가했습니다!

아래는 당신이 봐야 할 것입니다!