Getting google maps api key from process env

Question

I need to add google maps api key into my .env file.

I configured my webpack according to this config and use it in my map component. When I console log this key I can see it in console, But while using it with map, map opened just a second then I got a warning screen.

Webpack file:

plugins: [
    new Dotenv({ systemvars: true }),
],

Map component:

const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_API_KEY,  
    libraries: [GOOGLE_MAP_PLACES_LIBRARY],
});

.env file:

REACT_APP_API_KEY : "someKey"

Error that i got after a second

rufat29 · Accepted Answer · 2024-08-06 11:54:52Z

0

I just added this into my webpack:

const dotenv = require("dotenv").config();

For plugins:

   plugins: [
            new webpack.DefinePlugin({
                "process.env": {
                    REACT_APP_API_KEY: JSON.stringify(dotenv.parsed.REACT_APP_API_KEY),
                },
            }),]

And just used it in my component:

googleMapsApiKey: process.env.REACT_APP_API_KEY,

answered Aug 6, 2024 at 11:54

rufat29

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting google maps api key from process env

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related