👉 초기 기본 계정 세팅

1. 계정 생성 및 api key 발급
   Google Developers Platform을 처음 쓰면 다 등록해야 한다.
2. http 웹 리퍼러 api 키 보호 설정
   • 구글 Maps API는 사용한 만큼 과금이 되는 유료 API이지만, 계정 설정 후 한 달에 28,500번 정도는 무료로 호출이 가능. 이후부터 유료로 전환된다. (계정 초기 설정 시 결제 카드 등록함)
   • api 키 생성 시 기본으로 보호설정이 되어있지 않은 상태임.
   • _(😟 그럴..일은.. 없것지만...) 악의적인 의도로를 갖고 내 API 키를 사용해서 구글 Maps API를 엄청나게 호출하면 과금 대박임..
     - 위와 같은 상황을 방지하기 위해 api 보호 설정 함
     • !! 결제 탭의 예산 및 알림에서 여러 비용에 따라 메일로 알람을 받는 방법도 있음.
     • 그냥 필요한 기간동안만 사용하고 api key 삭제하는게 맘편혀ㅋㅋ
     • 구글 맵 api를 사용할 도메인을 입력하면 됨

👉 설치

1-1. Google Maps의 Docs이용

• 쫌 불친절
  

1-2-1. react-google-maps 라이브러리 이용

• 사용이 더 쉽고 가벼움.

1-2-2. @react-google-maps/api 라이브러리 이용

• 다운로드 수가 1-2-1보다 더 많음! 신뢰도 up ㅋㅋ
• 구글맵 API의 복잡하고 자세한 기능까지 구현
• 업데이트 최근까지 굿
  (이 라이브러리로 사용할거임.)

---

👉 사용 방법

1. 위 설치 참고하여 라이브러리 다운로드

2. .env파일에 발급받은 Google API Key 추가

3. 코드 작성

      <div className="h-40 border border-blue-500">
        <LoadScript googleMapsApiKey="발급받은 key">
          <GoogleMap
            mapContainerStyle={containerStyle}
            center={center}
            zoom={10}
          >
            {/* Child components, such as markers, info windows, etc. */}
            <></>
          </GoogleMap>
        </LoadScript>
        )
      </div>

4. 출력 확인

• 여기까지 하면 아래 사진처럼 뜬다~~~! 나이쑤!!!
  

5. 기본 요소 추가 및 삭제

5-1-1. 기본 ui요소 지우기

• 위 출력된 캡쳐를 보면 기본 요소로 확대, 축소, 전체보기, 위성모드 등의 기본 ui버튼들이 있다.
  disableDefaultUI: true : 기본 ui 전체를 없애준다.

ex)
	<GoogleMap 
		...
 	   options={{disableDefaultUI: true}}
 	   ...
 	   >
	</GoogleMap>

5-1-2. 지도에 컨트롤 요소 추가하기

  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean 등....
  
  ex) 
  
  ...
  	<GoogleMap 
		...
    	options={{ streetViewControl: true, styles: myStyles }}
        			// 나는 위성뷰도 사용해야하기 때문에 
        			// streetViewControl을 true로 설정함.
   	 	...
   	 >	
	</GoogleMap>
...

5-2. 기본 설정 마커들 지우기

기본적으로 음식점, 명소 등 마커가 다 뜸. => option의 styles를 지정하여 지저분한 마커들을 다 지울 수 있음.

ex)
	const myStyles = [
  	{
  	  featureType: "poi",
  	  elementType: "labels",
  	  stylers: [{ visibility: "off" }],
  	},
	];  
	     // featureType, elementType로 
		 // styler를 추가하여 선택한 지형지물과 요소에 적용할 규칙을 정할 수있음.
	...
	<GoogleMap 
		...
    	options={{ disableDefaultUI: true, styles: myStyles }}
   	 	...
   	 >	
	</GoogleMap>

6. Marker 찍기

• React 18 이후 버전에서는 Marker 대신 MarkerF 를 사용해야 한다.

...
 const center = useMemo(() => ({ lat: 12.345, lng: 678.91 }), []);
...
<GoogleMap ~~~>
     <MarkerF position={center} />
       	// 나는 기본 마커만 쓸거라서 옵션 전부 뺌.
       	// 👉 position (필수옵션!) = 마커의 위치
        // 👉 custom Marker사용시 마커 추가 선택옵션
       	    // map = 마커를 배치할 Map을 지정   ex) map={myMap1}
       		//       마커의 setMap() 메서드를 호출하여 마커 추가 및 삭제 가능.        
            // title = 마커의 설명   ex) title:"Hello World!"
       	    // icon, path, scale, anchor, rotaion, fillColor 등등..
</GoogleMap>
...

7. 마커에 현재 위치값(좌표) 연결하기

현재 위치값을 받기 위해 대부분
나는 일단 간단하게,,(이게 맞나 싶긴함.. 아무튼 좌표값이 잘 불러와지긴 해서 씀..)

👉 크롬에서 getCurrentPosition 메서드는 https와 localhost에서만 동작함.

• 기본적으로 위치 정보 사용 동의가 되어있어야 함.
• 동의 후 position 객체를 반환함.
• console.log(position) : 위치, 스피드, 고도 등의 값들 담겨있음.
  
• 기타 옵션들
  enableHighAccuracy(배터리를 더 소모해서 더 정확한 위치를 찾음)
  timeout(주어진 초 안에 찾지 못하면 에러 발생)
  maximumAge(한 번 찾은 위치 정보를 해당 초만큼 캐싱)
  

  const [lat, setLat] = React.useState(0);
  const [lng, setLng] = React.useState(0);
  const markerPosition = { lat, lng };


  const getLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          console.log(`Position.Latitude 위도 : ${position.coords.latitude}`);
          setLat(position.coords.latitude);
          console.log(`Position.longitude 경도 : ${position.coords.longitude}`);
          setLng(position.coords.longitude);
        },
        (error) => {
          console.error(error);
        },
        {
          enableHighAccuracy: false,
          maximumAge: 0,
          timeout: Infinity,
        }
      );
    } else {
      alert("GPS를 지원하지 않습니다. 설정을 확인하세요.");
    }
  };
  React.useEffect(() => {
    getLocation();
  }, []);

• 위에서 받은 좌표를 markerPosition로 담아서 아래 마커 옵션으로 넘겨주며녀 됨.
  GoogleMap 에서의 center = 지도의 보여지는 가운데 지점
  GoogleMap 에서의 zoom = 초기 구글맵 화면의 확대 정도
  MarkerF에서의 position = 마커가 찍힐 지점
  

...
	<GoogleMap
    	...
        center={center}   
        zoom={16}
        ...
    >
    	<MarkerF position={markerPosition} />  👈!
    </GoogleMap>
...

8. 마커의 위치값(좌표) 받기

-추가예정

---

👉 참고

• 구글맵 내부에서 찍는 Marker는 GoogleMap 컴포넌트 내부에서 선언
• LoadScriptNext
  - Next에서 사용할 경우 대신 를 사용해준다.
  - 발급받은 API 키를 googleMapsApiKey에 넣어준다.
• GoogleMap
  - 기본 zoom정도와 기본 위치(center)를 설정해주고, mapContainerClassName를 사용해 className값을 전달해주었다.(Wrapper 참고)
• MarkerF
  - React 18 이후로는 태그 대신 를 사용해줘야 한다.
  - custom Marker를 사용하고 싶을 경우 icon내에 img url과 scale 값을 지정해준다.
  
• 18 버전에서 <Marker/> 대신 <MarkerF/>를 사용

---

☠️ RefererNotAllowedMapError 에러

• http 특정 웹사이트에서만 사용 가능하도록 제한해뒀더니 아직 배포를 안해서그런지 이런 에러가 떴다.
• 일단 제한 전체 해제하여 에러를 처리했다.ㅋ ㅋ... ㅎ;;
  

---

참고 : google maps platform
참고
참고
좌표 참고