TypeError close(maps-api-v3/api/js/58/11a/intl/en_gb/util)

[benliger1987]

I am encountering an issue with Google maps in React. The steps that are causing the above error are as follows:

1. A modal is opened on a specific page displaying a map with a marker on it
2. The user clicks a button and they are navigated away from the page to another
3. The error occurs during/ after navigation

this.Eg.close is not a function. (In 'this.Eg.close()', 'this.Eg.close' is undefined)

Environment details

1. Either Marker or Maps API
2. Mac OS X >=10.15.7
3. v3

Code example

const Marker: FC<google.maps.marker.AdvancedMarkerElementOptions> = (options) => {
  const [marker, setMarker] = useState<google.maps.marker.AdvancedMarkerElement>();

  useEffect(() => {
    if (marker === undefined && options.map !== undefined) {
      setMarker(new window.google.maps.marker.AdvancedMarkerElement(options));
    }
  }, [marker, options.map]);

  return null;
};

export const Map: FC<google.maps.MapOptions> = ({ center }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [map, setMap] = useState<google.maps.Map>();

  const [isMakerLibraryLoaded, setIsMarkerLibraryLoaded] = useState(false);

  const isInitialized = isMakerLibraryLoaded;

  useEffect(() => {
    window.google.maps.importLibrary('marker').then(() => setIsMarkerLibraryLoaded(true));
  }, []);

  useEffect(() => {
    if (ref.current !== null && map === undefined && isInitialized) {
      setMap(
        new window.google.maps.Map(ref.current, {
          center,
          zoom: 15,
          streetViewControl: false,
          mapTypeControl: false,
          fullscreenControl: false,
          mapId: 'avhasdasd',
        })
      );
    }
  }, [map, isInitialized]);

  return (
    <div
      ref={ref}
      style={{
        width: '100%',
        height: '200px',
        marginTop: '20px',
        position: 'absolute',
        top: '-20px',
        left: 0,
      }}
    >
      {isInitialized && <Marker position={center} map={map} />}
    </div>
  );
};

Stack trace

this.Eg.close is not a function. (In 'this.Eg.close()', 'this.Eg.close' is undefined)

[usefulthink]

I'm pretty sure that this has nothing to do with the @googlemaps/js-api-loader, so I would recommend reporting this in the Issue Tracker for the Maps JavaScript API.

But since this is react-code... I have seen errors similar to this, and they often have something to do with unexpected re-rendering of components or things happening too fast / out of order or things like that. Can you share a stacktrace of that error (or an example on e.g. codesandbox where I can see it myself), so we can see where in the code this originated?

(note: I'm also maintaining the @vis.gl/react-google-maps library, which could make it a lot simpler for you since we already solved a lot of those issues)

[benliger1987]

I'm pretty sure that this has nothing to do with the @googlemaps/js-api-loader, so I would recommend reporting this in the Issue Tracker for the Maps JavaScript API.

But since this is react-code... I have seen errors similar to this, and they often have something to do with unexpected re-rendering of components or things happening too fast / out of order or things like that. Can you share a stacktrace of that error (or an example on e.g. codesandbox where I can see it myself), so we can see where in the code this originated?

(note: I'm also maintaining the @vis.gl/react-google-maps library, which could make it a lot simpler for you since we already solved a lot of those issues)

Oh brilliant thank you for the link. If you think the issue may well be fixed in the library I will probably opt to migrate to that as migration should be fairly quick and simple. Sharing the stack trace or re-creating the issue may be tricky. Please feel free to close this one. Thanks

[usefulthink]

I can't guarantee it not being there, but at least we have a lot of people using the library, and I think it would have been reported by now.

[benliger1987]

@usefulthink I just migrated to your library and it's the same issue. Shall I raise this bug over there instead?

[usefulthink]

Oh man, sorry to hear that. If you could provide us with an example where you can reproduce the issue, that would be most amazing. I'll try my best to figure out what and why is happening there.