React google maps add marker with user location

Question

I have integrate google maps into my website and i want add a marker with user location. First file is Map.js and second MapContainer.js. In MapContainer.js in this file I have all the data for map rendering, circle, zoom, API and map dimensions Sorry for the code format, but this is the second time I'm writing on this community

import React, { Fragment } from "react";
import {
    withGoogleMap,
    GoogleMap,
    withScriptjs,
    Marker,
    Circle
} from "react-google-maps";




const Map = props => {

    return (

        < GoogleMap
            defaultZoom={props.zoom}
            defaultCenter={props.center}


        >

            {
                props.places.map(place => {
                    return (

                        < Fragment key={place.id} >

                            {place.circle && <Circle
                                defaultCenter={{
                                    lat: parseFloat(place.latitude),
                                    lng: parseFloat(place.longitude)
                                }}
                                radius={place.circle.radius}
                                options={place.circle.options}
                            />
                            }

                        </Fragment>
                    );
                })
            }
        </GoogleMap >
    );
}

export default withScriptjs(withGoogleMap(Map));

// position = {{ lat: 45.764288, lng: 21.209806 }}

~

import React, { Component } from "react";
import Map from "./Map";


const data = [
    {
        id: 1,
        name: "Zona Verde",
        latitude: "45.752814",
        longitude: "21.229137"
    },
    {
        id: 2,
        name: "Zona Galbena",
        latitude: "45.752814",
        longitude: "21.229137"
    },
    {
        id: 3,
        name: "Zona Rosie",
        latitude: "45.752814",
        longitude: "21.229137"
    },


];


data[0].circle = {
    radius: 10000,
    options: {
        strokeColor: "green",
        fillOpacity: "0.1",
        fillColor: "green"
    }
};
data[1].circle = {
    radius: 20000,
    options: {
        strokeColor: "yellow",
        fillColor: "yellow",
        fillOpacity: "0.1"

    }
};
data[2].circle = {
    radius: 30000,
    options: {
        strokeColor: "red",
        fillColor: "red",
        fillOpacity: "0.1"
    }
};

export default function MapContainer() {
    return (
        <div>
            <Map

                style={{ borderRadius: "25px" }}
                center={{ lat: 45.764288, lng: 21.209806 }}
                zoom={10}
                places={data}
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_6NDZYcE5HDyU9onLOGrsLN2kgW0QIn4"
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `400px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />

        </div>
    );
}

Answer 1

Just put Marker component inside GoogleMap the same way like you add circles.

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

Also you can add another prop to Map component and pass marker with other props.

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

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

UPDATE

Use my previous answer but also add new state to MapContainer which will be passed to Map. This state will be user position taken from Geolocalization API.

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>
    );
}

Then you can pass marker as prop to Map.