google maps 현재 위치 받기

리뷰 컴포넌트를 만들고보니

'가져올 가게에 있는 리뷰도 google maps에 등록된거잖아?' 라는 생각이 들었다.

우리가 할 일은 24시 카페의 위치와 내용들을 구글맵에서 그대로 받아오는거라서 내가 리뷰를 만들 필요가 없었다.

 

결국 구글맵스부터 만들고 데이터를 받아와서 작업을 했어야했다.

일단 구글맶는 띄워두었으니 유저가 접속했을때 그 위치를 받아오는 작업을 먼저 하기로 했다.

import React, { useEffect, useState } from 'react';
import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api';

const MapContainer = () => {
  const { isLoaded, loadError } = useJsApiLoader({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  });

  const [center, setCenter] = useState({ lat: 0, lng: 0 });

  const mapStyles = {
    width: '100%',
    height: '400px',
  };

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          setCenter({
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          });
        },
        error => {
          console.error('Error getting user location:', error);
        },
      );
    } else {
      console.error('Geolocation is not supported by this browser.');
    }
  }, []);

  if (loadError) return <div>위치 권한 동의 안할 시 이미지 띄우기</div>;

  return (
    isLoaded && (
      <GoogleMap mapContainerStyle={mapStyles} center={center} zoom={10}>
        <Marker position={center} />
      </GoogleMap>
    )
  );
};

export default MapContainer;

geolocation으로 현재위치의 위도와 경도를 받아서 중심으로 잡았다.

자 이제 어떻게 뜰까? 두근두근했는데

 

에엥  위치 권한을 줬는데도 에러가 불러올수 없다고한다.

크롬의 쿠키설정도 만져보고 초기화도해보고 했지만 똑같은 상황이였다.

그러다가 맥북에서 막고있다는 사실을 알았다.

위의 이미지처럼 권한을 주고나니 원하는대로 뜨는것을 확인했다.