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

const LIBRARIES = ["places"];

const Map = ({center,zoom}) => {

    return (
      <div className="wrapper">
        <LoadScript googleMapsApiKey="AIzaSyC8E9pNSrSt8y_1M-zhHuBROQVOhgPZY28" libraries={LIBRARIES}>
          <GoogleMap
            id="map"
            center={center}
            zoom={zoom}
            mapContainerStyle={{ height: "50%" }}
          >
            {/*  Marker component */}
            <Marker position={center} />
          </GoogleMap>
        </LoadScript>
      </div>
    );
  }


export default Map;