ReferenceError: google is not defined

import { Link } from 'react-router-dom'
import {
  GoogleMap,
  useLoadScript,
  useJsApiLoader,
  Marker,
  InfoWindow,
} from '@react-google-maps/api'
import * as ROUTES from '../../NavigationComponent/constants'
import { globalConfig } from '../../../config'
const FindEhxHealthCareFacility = ({
  facilities,
  loading,
  search,
  filteredEhxFacilities,
}) => {
  const [entityType, setEntityType] = useState('HealthFacility')
  console.log('Location search:', search)
  console.log('Filtered Results:', filteredEhxFacilities)

  const mapStyles = {
    width: '100%',
    height: '70vh',
  }

  const defaultPosition = {
    lat: 5.57978,
    lng: -0.11112,
  }

  const customMapStyles = [
    {
      featureType: 'administrative.country',
      elementType: 'geometry',
      stylers: [
        {
          visibility: 'simplified',
        },
        {
          hue: '#ff0000',
        },
      ],
    },
  ]

  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: globalConfig.googleMapsApi,
    libraries: ['places'],
  })

  if (loadError) return 'Error loading Maps'
  if (isLoaded) return 'Loading Maps'
  

  return (
    <GoogleMap
      mapContainerStyle={mapStyles}
      zoom={20}
      center={defaultPosition}
      options={customMapStyles}
    ></GoogleMap>
  )
}
export default FindEhxHealthCareFacility

[rakeshlanjewar]

<LoadScript googleMapsApiKey="">
        <GoogleMap>
       </GoogleMap>
</LoadScript>

[rakeshlanjewar]

Can you try this,

new window.google

But wait for map to initialise, then use this