Markers not rendering using @react-google-maps/api

Question

I'm relatively new to react world and particularly to using google maps. I'm using @react-google-maps/api and React version 18. I'm trying to display multiple locations (as markers), however, they are not being displayed on the initial render. I followed the documentation, and I don't get any errors, just markers are not shown. does anyone know why? Thank you! Here is the code:

const GoogleMapComponent = () => {
  const markers = useSelector(filteredMarkers);

  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: |||||||||||||||||||||||||||||
  });

  const [map, setMap] = useState<google.maps.Map | null>(null);

  const onLoad = React.useCallback(function callback(map: google.maps.Map) {
    setMap(map);
  }, []);

  const onUnmount = React.useCallback(function callback(map: google.maps.Map) {
    setMap(null);
  }, []);

  return isLoaded ? (
    <div style={{ width: "100%", height: "80vh" }}>
      <GoogleMap
        mapContainerStyle={MapSettings.containerStyle}
        center={MapSettings.center}
        zoom={3}
        options={MapSettings.defaultMapOptions}
        onLoad={onLoad}
        onUnmount={onUnmount}
      >
        {markers?.map((marker) => (
          <Marker
            icon={{
              path: google.maps.SymbolPath.CIRCLE,
              scale: 3,
            }}
            position={marker.location}
            key={marker.id}
          />
        ))}
      </GoogleMap>
    </div>
  ) : (
    <div>
      <Spinner />
    </div>
  );
};

Answer 1

Have you tried using MarkerF instead of Marker?

See: https://github.com/JustFly1984/react-google-maps-api/issues/3048#issuecomment-1166410403

"MarkerF is functional component vs class based Marker component, which does not work with react Strict and/or react@17+"

The same principle applies to InfoWindowF in place of InfoWindow.

Also, check out similar issues Map Marker don't show up (Marker rendered before Map)- ReactJS with @react-google-maps/api and React Google Maps Api doesn't render children elements at first render

Answer 2

I guess this problem cause by React version.

now my index.js code is

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

but it is shown when I changed the code to

const rootElement = document.getElementById("root");

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
)

so in my opinion, I have to downgrade React version to 16 or 17 OR I have to find another solution on version-18

Answer 3

I solved this problem by adding a useEffect that has as dependency the "isLoaded" because the Map could be loading before the Markers

 useEffect(() => {
    if (isLoaded) setMarkers(Data);
  }, [isLoaded]);