[F.0o, F.lM, p.aI Error] Google Maps API 오류

  

    
    
    
    
  
ERROR
undefined is not an object (evaluating 'F.Oo')
@https://maps.googleapis.com/maps/api/js:1573:329
ERROR
undefined is not an object (evaluating 'F.lM')
@https://maps.googleapis.com/maps/api/js:1577:348

 

Google Maps는 불러와지는데

위 에러가 계속 발생한다.

 

정의되지 않은 undefined 객체를 참조하려고 할 때 발생하는 오류인데,

주요 원인으로는

 

1. API Key 문제

2. 비동기 로딩 문제 : API가 완전히 로드되기 전에 Maps 객체에 접근하려고 시도할 때 발생

3. 콜백 함수 문제 : callback = initMap 파라미터를 사용할 때, window.initMap 함수가
API 스크립트가 로드되기 전에 제대로 정의되지 않은 경우 발생

4. 라이브러리 충돌

5. 버전 호환성 문제

 

가 있다는데

코드를 뜯어보며 하나하나 수정하며 원인을 찾아봤다.

 

우선 콜백 함수 문제였던 것 같다.

 

  

    
    
    
    
  
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=initMap`;
      script.async = true;
      script.defer = true;

 

위처럼 스크립트 로드 부분에서 콜백 방식을

아래로 변경해봤다.

약간의 지연을 줘서 API가 완전히 로드되도록 하는 방식이다.

  

    
    
    
    
  
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
      script.onload = () => {
        setTimeout(initializeMap, 100);
      };
      script.async = true;
      script.defer = true;

 

이렇게 발생하던 에러는 사라졌다.

 

👍

 

그리고 새로운 에러가 등장했다 샹칼.

  

    
    
    
    
  
ERROR
undefined is not an object (evaluating 'p.aI')
@https://maps.googleapis.com/maps/api/js:1599:339

 

이건 또 Google Maps API의 축소된(minified) JavaScript 코드 내에서
p.aI 객체가 정의되지 않았는데 접근하려고 할 때 발생하는 오류란다.

 

1. API 초기화 타이밍 문제 : Google Maps API의 내부 컴포넌트들이 올바른 순서로 초기화되지 않을 때 발생

2. DOM 요소 준비성 문제 : 지도를 렌더링할 DOM 요소가 API 초기화 시점에 완전히 준비되지 않았을 경우 발생

3. API 버전 호환성 문제 : 특정 버전의 API에서 발생하는 버그

4. API Key 제한 문제

 

 

또또또또또 삽질이다.

 

정상적으로 불러와지다가 불규칙적으로 발생하는 걸 봐서는

API 초기화 타이밍 문제같다.

 

 

1. 타이밍 문제 해결

- setTimeout을 사용하여 지도 초기화 전에 300ms 지연을 추가
(API의 모든 구성 요소가 완전히 로드될 시간을 확보)

- Google Maps의 idle 이벤트를 사용하여 지도가 완전히 렌더링된 후에만 지오코딩을 수행

 

2. Promise 기반 접근

- 지도 초기화를 Promise로 래핑하여 비동기 흐름을 보다 잘 제어

 

3. React Hooks 규칙 준수

- useScript훅을 사용했다 뒤집어졌어서, 이를 제거하고 콜백을 직접 사용하는 대신,
컴포넌트 최상위 수준에서 스크립트 로딩 로직을 구현

- scriptLoaded 상태 추가

 

 

거의 코드를 갈아엎긴했는데,

이렇게 삽질을 거쳐 Google Maps API 로딩 시 발생하는 타이밍 문제를 줄이고

전반적인 안정성을 향상시켜 정상적으로 오류 없이 작동한다.

1.