Custom Google Maps component implementation for React with Maps JavaScript API. Decided ditch this component to use embedded <iframe> Google Maps with Maps Embed API in my project, because I wouldn't utilize most of features of the Maps Javascript API, and made no sense to pay for something if I were to exceed my usage limit...

map.js

import { useTranslation } from "gatsby-plugin-react-i18next"
import React from "react"
import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api"
import styled from "styled-components"

import CustomMarker from "../../static/media/images/misc/marker.png"

const containerStyle = {
  boxShadow: "0 0 5rem rgba(0, 0, 0, 0.66)",
  height: "42vh",
  width: "100%",
}

const optionsMap = {
  center: {
    lat: 47.91544,
    lng: 19.18234,
  },
  disableDefaultUI: true,
  mapId: "5f7a127095b26122",
  mapTypeId: "hybrid",
  zoom: 15,
}

const Map = React.memo(() => {
  const { t } = useTranslation()

  const { isLoaded, loadError } = useJsApiLoader({
    googleMapsApiKey: "AIzaSyA8feSAc8Ccdb3ywG0ggx6bvEqcJxMjjPw",
    mapIds: ["5f7a127095b26122"],
  })

  if (loadError) {
    return (
      <Container>
        <h2>{t("mapError")}</h2>
      </Container>
    )
  }

  return isLoaded ? (
    <GoogleMap mapContainerStyle={containerStyle} options={optionsMap}>
      <Marker icon={CustomMarker} position={optionsMap.center} />
    </GoogleMap>
  ) : (
    <Container>
      <Spinner>
        <Accessibility>{t("mapLoading")}</Accessibility>
      </Spinner>
    </Container>
  )
})

export default Map

const Container = styled.div.attrs({
  className: "d-flex align-items-center justify-content-center",
  style: containerStyle
})``

const Spinner = styled.div.attrs({
  className: "spinner-grow",
  role: "status"
})``

const Accessibility = styled.span.attrs({
  className: "visually-hidden"
})``