Map Marker don't show up (Marker rendered before Map)- ReactJS with @react-google-maps/api

Question

What I want:

Having a Default ReactJS App with a Google Map

Problem:

Marker don't display

Possible reason:

Marker been added before map finish load.

Files:

App.js, (Default ReactJS file)

Map.js, (Customized ReactJS Component)

./style/map.css

Map.js:

import { GoogleMap, useLoadScript, Marker } from "@react-google-maps/api";

import React from "react";
import "./style/map.css";

const Map = ({ zoomLevel, map_lat, map_lng, mark_lat, mark_lng }) => {
  const center = { lat: map_lat, lng: map_lng };

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "---USE API KEY HERE---",
  });

  //Return maps
  if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <GoogleMap
        mapContainerClassName="map-container"
        zoom={zoomLevel}
        center={center}
        onLoad={() => {
          console.log("Map is loaded!");
        }}
      >
        {/* Debug Purpose */}
        {console.warn("Marker been added!")}

        {/* Add Marker */}
        <Marker position={{ lat: mark_lat, lng: mark_lng }} />
      </GoogleMap>
    );
  }
};

Map.defaultProps = {
  zoomLevel: 14,
  map_lat: 50,
  map_lng: -100,
  mark_lat: 50,
  mark_lng: -100,
};

export default Map;

Extra Information:

As you may noticed, I have console log and warn to tell the order of render, from my understanding,

Marker seems been added before Map fully loaded.

Debug Result: Marker been added before Map onLoad been called.

And I do managed render the marker on the map manually (local host):

1. delete the Marker in run time and save changes, (So let the Map finish load first.)

2. add Marker. (Map is already finished loading)

And now I got the marker, but it will not be here next time.

Manually Add Marker After Map Rendered, The Marker appear.

Answer 1

I Finally Rendered my marker on the webpage.

In case you facing the same problem, here is example code from Installation documentation of the @react-google-maps/api:

Don't ask me what is the problem or any detail, because I don't know either.

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

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MyComponent() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "YOUR_API_KEY"
  })

  const [map, setMap] = React.useState(null)

  const onLoad = React.useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds(center);
    map.fitBounds(bounds);
    setMap(map)
  }, [])

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null)
  }, [])

  return isLoaded ? (
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
        onLoad={onLoad}
        onUnmount={onUnmount}
      >
        { /* Child components, such as markers, info windows, etc. */ }
        <></>
      </GoogleMap>
  ) : <></>
}

export default React.memo(MyComponent)

Answer 2

This sounds a lot like issue: Markers not rendering using @react-google-maps/api

or issue: React Google Maps Api doesn't render children elements at first render.

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 using InfoWindoF in place of InfoWindow...