How do I make googleMapsApiKey invisible in my browser?

[gonta1026]

How do I make googleMapsApiKey invisible in my browser?
From a security standpoint, we do not want to show the api key in the browser.

sample

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'
import React from 'react'
import { CustomMarker, GoogleMapType } from '@/features/delivery/address/utils'

const mapContainerStyle = {
  height: '300px',
  width: '100%',
}

type Props = {
  googleMap: GoogleMapType
  marker: CustomMarker
  handleMarkerDragEnd: (newPosition: google.maps.LatLngLiteral) => void
}

export const AddressMap: React.FC<Props> = ({ googleMap, marker, handleMarkerDragEnd }) => {
  /***
   * @question
   *  How do I make googleMapsApiKey invisible in my browser?
   * ***/
  const googleMapsApiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_PLATFORM_API_KEY as string
  return (
    <LoadScript {...{ googleMapsApiKey }}>
      <GoogleMap
        {...{ mapContainerStyle }}
        center={googleMap.center}
        zoom={20}
        options={{
          streetViewControl: false,
          mapTypeControl: false,
        }}
      >
        <Marker
          position={marker.position}
          label={marker.label}
          draggable={true}
          onDragEnd={(e) => handleMarkerDragEnd({ lat: e.latLng?.lat() ?? 0, lng: e.latLng?.lng() ?? 0 })}
        />
      </GoogleMap>
    </LoadScript>
  )
}

[JustFly1984]

Not possible. The best approach would be to limit your google cloud key to your domain name and only maps or other required google cloud services like places, etc.

[rajeshrah22]

Wait really? Is that because how the Google API itself is made or is it because of this react-google-maps-api?

[JustFly1984]

Google

[JustFly1984]

Ps, use MarkerF component for latest react version compatibility