0

I have used from @react-google-maps/api. Everything was working on my localhost, but now when I deployed it on Vercel I get an error that my key is invalid. I have already put the key in Environment Variable.

Exact error in console: Google Maps JavaScript API error: InvalidKeyMapError

enter image description here

I return this in my maps component file.

   <div className="h-screen flex-col " >
       <LoadScript googleMapsApiKey = {process.env.NEXT_PUBLIC_GOOGLE_MAPS_ID} 
           libraries={["places"]}>
        <Places 
          setOffice = { (position) => {
          setOffice(position);
          console.log(setOffice)
          mapRef.current?.panTo(position);
        }} />            
        <GoogleMap 
          zoom={13} 
          center = {mapCenter}
          mapContainerClassName=" mapContainer "
          options={options}
          onLoad={onLoad}
          
        >  
        {attractions?.docs.map((attraction) => (
          
          <InfoWindow
            position={attraction.data().location}
            key={attraction.id} // Add a unique key prop for each item in the loop
          >
            <div >
             <NewChat title={attraction.data().title} /> 
            </div>
          </InfoWindow>
        ))}
        </GoogleMap>
      </LoadScript>
    </div>

Interestingly enough in order to make maps work on localhost I had to add"" at the beginning and end of the API key in my env file.

for example

NEXT_PUBLIC_GOOGLE_MAPS_ID="A.....z"

I tried the same approach in Environment Variable. I have made the key unrestricted in order to prevent those errors of not providing a safe URL...

zorz
  • 11
  • 3
  • Welcome to Stack Overflow! Yes, you need to add `""` in your API key when you store it inside an env variable. But what's the issue here? Was it now fixed after the changes? Please provide some more details and improve your question by reading [how to ask](https://stackoverflow.com/help/how-to-ask) :'> – Yrll Jun 08 '23 at 03:34
  • Yes, I did the same with Environment Variable in Vercel, but it doesn't work. I don't know what should I even try at this point... – zorz Jun 08 '23 at 03:57
  • Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) that we can try on our end and see what's wrong? We're just guessing at this point. Or if you can't share your code publicly, you can file a support case to the google maps support team for them to check your project/keys internally. With that said, you should check this article and see if this could help: https://medium.com/web-dev-survey-from-kyoto/3-gotchas-of-google-maps-api-when-used-with-next-js-and-eslint-dba627c9657d – Yrll Jun 08 '23 at 04:19
  • I updated the question. I hope this is ok, this is my first post, sorry for inconvenience – zorz Jun 08 '23 at 04:32
  • Does the production build works when you unrestrict your API key? – Yrll Jun 08 '23 at 04:39
  • No it doesn't... – zorz Jun 08 '23 at 04:42
  • Have you tried hardcoding your API key instead of calling the `.env` file and tried to build and run it in production? – Yrll Jun 08 '23 at 04:46
  • Yes. It works that way, sorry for not providing that info... – zorz Jun 08 '23 at 04:54
  • Thanks for confirming, then we can isolate / deduce that the issue could be coming from how vercel is deploying your project. Like for example, when deploying it, it does not read or access the `.env` file which causes it to only read the `NEXT_PUBLIC...` variable call in the `` bootsrap that causes an invalid API key error. You might want to dig a little deeper for that. – Yrll Jun 08 '23 at 05:00
  • I suppose it access .env file bcs it reads other keys... Can you give me suggestions on where to start debugging this thin... Can it be problem that I used 'use client' on top of that component? – zorz Jun 08 '23 at 05:19
  • In order to check if vercel is actually capable of reading process.env.NEXT_PUBLIC_GOOGLE_MAPS_ID I console.loged it just under the and it returned api key in production mode. I really have no idea what can be issue at this point... – zorz Jun 08 '23 at 05:32
  • Okay so I don't know why or how but I put apiKey in const mapKey and then used it instead of {process.env.NEXT_PUBLIC_GOOGLE_MAPS_ID}, I deleted "" in .NEXT_PUBLIC_GOOGLE_MAPS_ID and it started working. if that is the cause or something else, I have no idea at this point.... hahahahah – zorz Jun 08 '23 at 05:42
  • If I understand correctly, putting the raw apiKey in a variable inside the component then putting it inside the `loadscript` is basically the same as hardcoding it. And if you're doing that, it does not matter what you do with the env file. But, it's working now :'> haha. Also, since regardless if your storing it inside a local env file or not, anybody can still access your API key by inspecting your website. So I suggest that you restrict it within your domain by following this [best practice](https://developers.google.com/maps/api-security-best-practices) – Yrll Jun 08 '23 at 06:16
  • I didn't put apiKey in variale. I did the following const varKey = progress.env.NEXT_GOOGLE_MAPS_ID and then used varKey... – zorz Jun 08 '23 at 09:18
  • Oh okay! thanks for clarifying. Pretty weird but I'm glad that it worked now. haha. Then you can put your workaround as an answer then. hahaha – Yrll Jun 08 '23 at 09:22

1 Answers1

0

Okay so I don't know why or how but I put apiKey in const mapKey and then used it instead of process.env.NEXT_PUBLIC_GOOGLE_MAPS_ID, I deleted "" in env. NEXT_PUBLIC_GOOGLE_MAPS_ID and it started working. if that is the cause or something else, I have no idea at this point..

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
zorz
  • 11
  • 3