import GoogleMapReact from "google-map-react";
const GoogleMapComponent = (props) => {
    const { center, zoom } = props;

    let data = [center];

    const ModelsMap = (map, maps) => {
        //instantiate array that will hold your Json Data
        let dataArray = [];
        //push your Json Data in the array
        {
            data.map((markerJson) => dataArray.push(markerJson));
        }

        //Loop through the dataArray to create a marker per data using the coordinates in the json
        for (let i = 0; i < dataArray.length; i++) {
            let marker = new maps.Marker({
                position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
                map,
                label: dataArray[i].id,
            });
        }
    };
    return (
        <GoogleMapReact
            options={function (maps) {
                return {
                    overviewMapControl: true,
                    mapTypeControl: true,
                };
            }}
            bootstrapURLKeys={{
                key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
            }}
            defaultCenter={center}
            defaultZoom={zoom}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
        ></GoogleMapReact>
    );
};

export default GoogleMapComponent;