map.js

import GoogleMapReact from "google-map-react";
import { CustomIcon } from "@/chakra/icons/custom-icon"; // replace with any icon if not using chakra


// @link https://blog.logrocket.com/a-practical-guide-to-integrating-google-maps-in-react/
// @link https://developers.google.com/maps/gmp-get-started#create-project
// - setup google project
// - setup google api key (credentials)
// - enable api for project (javascript api)
// - setup billing for project
const config = {
  address: "304 Central Ave, Jersey City, NJ 07307",
  center: {
    lat: 40.74513,
    lng: -74.04952,
  },
  zoom: 17,
};

export const Map = ({
  address = config.address,
  center = config.center,
  zoom = config.zoom,
}) => (
  <div className='map'>
    <chakra.div w='100%' h={{ base: "80vh", lg: "60vh" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: process.env.NEXT_PUBLIC_GMAPS_API_KEY }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        {process.env.NODE_ENV !== "production" &&
          console.log("env", process.env.NEXT_PUBLIC_GMAPS_API_KEY)}
        <LocationPin lat={center.lat} lng={center.lng} text={address} />
      </GoogleMapReact>
    </chakra.div>
  </div>
);

const LocationPin = ({ text }) => (
  <chakra.div
    className='pin'
    display='flex'
    alignItems='center'
    w='180px'
    color='blue.300'
  >
    {/* <Icon icon={locationIcon} className='pin-icon' /> */}
    <CustomIcon icon='location' fontSize='1.3rem' />
    <p fontSize='1.3rem'>{text}</p>
  </chakra.div>
);