import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps";
import {default as CffsMapStyling} from "./CffsMapStyling"

export default function SimpleMap(props) {
    console.log(props)

    return (
        <section className="simple-map">
            <GoogleMapLoader
                containerElement={<div {...props} style={{
                height: "100%"
            }}/>}
                googleMapElement={<GoogleMap
                ref={(map) => console.log(map)}
                defaultZoom={16}
                defaultOptions={{
                scrollwheel: false,
                navigationControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                styles: CffsMapStyling
            }}
                styles={CffsMapStyling}
                defaultCenter={{
                lat: 43.7966208,
                lng: -123.059694
            }}
                onClick={function() {}}>
                {props.markers.map((marker, index) => {
                    return (<Marker
                        {...marker}
                        onRightclick={function() {
                        console.log('rightclicked')
                    }}/>);
                })}
            </GoogleMap>}/>
        </section>
    );
}
