구글맵 연동하기

 

역시나.. 회사업무와 사이드프로젝트하기란,, 쉽지 않다고 생각했다.

그치만, 회사업무가 거의 없는 지금 이 상황에도 사이드프로젝트하기란 쉽지않다.. 하핫

 

매번 블로그도 열심히 작성해보자고 다짐하는 나였지만 항상 다짐으로 끝나는 나! 

이제는 화이팅해야지! 새해(라고 하기엔 3월이다)니까 새로운 마음으로 의지를 다잡아보겠습니당~~!

 

 

서론이 좀 길었고,,

본론으로 들어가자면 현재 진행중인 사이드프로젝트에선 지도와 그래프를 활용하고 있는 부분이 있다.

그 중에서 지도는 구글맵을 활용하고 있다.

 

우선 구글맵을 고른 이유는 내가 구현하고자 하는 부분이 지도에 라벨..? 정보창이 보여져야하는 부분이었다.

글로 설명하긴 어려우니 사진

 

딱 구현하고자 하는 부분이 위 이미지와 같았고 구글 지도가 한달에 28,500번 정도는 사용해야 유료로 전환되는 아주 혜자아이템이기에 활용하기로 결정했다.

 

근데 여기서 문제점이 구글 API를 불러오기 전에 구글 맵 함수를 먼저 호출해서 자꾸 google is undefined라고 에러가 발생했다.

말로만 설명하기는 어려워서 코드를 작성해보자면 아래와 같다.

google is undefined라길래 이렇게 작성했더니 콘솔에 0만 찍히는 ~~ -__-

const initMap = () => {
    const seoul = { lat: 37.5665, lng: 126.978 };
    const map = new google.maps.Map(
      document.getElementById('earthQuakeMap') as HTMLElement,
      {
        zoom: 8,
        center: seoul
      }
    );
    const contentString ='<div>안녕! 여기는 서울</div>' ;
    const infoWindow = new google.maps.InfoWindow({
      content: contentString,
      ariaLabel: 'seoul'
    });
    const marker = new google.maps.Marker({
      position: seoul,
      map,
      title: 'seoul'
    });

    marker.addListener('click', () => {
      infoWindow.open({
        anchor: marker,
        map
      });
    });
  };

   useEffect(() => {
    if (typeof google === 'undefined') {
      console.log(0); 
   } else {
     console.log(1);
     initMap();
     console.log(2);
   }
 }, []);

 

우선 이것 저것 서칭하다가 위 에러가 나타나는 원인은 google map script 가 아직 로드가 되지 않았는데 위 initMap 함수가 실행이 되어서 google을 못찾는 것이라고 판단했다. 

 

따라서 Google Maps JavaScript API 스크립트를 동적으로 로드하는 라이브러리인 js api loader 를 찾았고 (오늘날 기준 13일전에 업데이트 된 따끈따끈) 위를 활용하여 해당 에러를 해결할 수 있었다.

 

const googleMapsApiKey = process.env.NEXT_PUBLIC_GOOGLE_MAP_KEY || '';
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey
  });

 

isLoaded값이 boolean으로 나오고 이를 활용해서 initMap함수를 호출하는 방법으로 해당 오류를 수정했다.

 

 

우선은 라이브러리를 활용해서 구현해두긴 했는데 다른 방법도 더 찾아볼 예정이다!

지금은 당장 에러만 잡은 상태이고 기능 구현은 마무리 된 상태가 아니라서 백엔드와 데이터 연결을 하면서 더 디벨롭하겠다.🙏🙏