React google maps ajouter un marqueur avec l'emplacement de l'utilisateur

Placez simplement le composant Marker dans GoogleMap de la même manière que vous ajoutez des cercles.

const Map = (props) => {
  return (
    <GoogleMap defaultZoom={props.zoom} defaultCenter={props.center}>
      <Marker position={{ lat: 45.764288, lng: 21.209806 }} />
      /* circles */
    </GoogleMap>
  );
};

Vous pouvez également ajouter un autre accessoire au composant Carte et passer le marqueur avec d'autres accessoires.

<Map marker={ props.marker } style={ /* etc. */ }/>

//inside GogleMap
<Marker position={ props.marker } />

MISE À JOUR

Utilisez ma réponse précédente mais ajoutez également un nouvel état à MapContainer qui sera transmis à Map. Cet état sera la position de l'utilisateur tirée de l'API de géolocalisation.

const Map = (props) => {
    return (
         <GoogleMap defaultZoom={props.zoom} defaultCenter={props.center}>
             <Marker position={{ lat: 45.764288, lng: 21.209806 }} />
             /* circles */
          </GoogleMap>
     );
};

export default function MapContainer() {
    const [ marker, setMarker ] = useState(null)

    useEffect(() => {
        navigator.geolocation.getCurrentPosition(
            ( location ) => setMarker({ 
               let: location.coords.latitude,
               lng: location.coords.longitude
            })
        )
    }, [])

    return (
        <div>
            <Map
                marker={ marker }
                style={{ borderRadius: "25px" }}
                /* etc. */
            />

        </div>
    );
}

Ensuite, vous pouvez passer le marqueur comme accessoire à la carte.